首页 > 原创文章 > 软件开发 > 查看文章

CSS常用字体及网页引用方式

所属分类:软件开发 来源: 网络收集 发布时间:2023-05-29 17:03 浏览: 8331 IP属地: 深圳

1.字体列表及引用链接

鸿蒙字体 - B 站

400 字重 CSS://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css
500 字重 CSS://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css


华康金刚黑 - 字节跳动

400 字重 CSS://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap
500 字重 CSS://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap


思源黑体 - 谷歌字体库

可变字重 CSS://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap
该 CSS 可以通过链接控制字重,比如我只想要 400 字重,那么在链接@400;500;700 部分修改为@400,增加同理。


小米字体 - 小米 MIUI 官网

可变字重 CSS://font.sec.miui.com/font/css?family=MiSans:400,500,700:Chinese_Simplify,Latin&display=swap
该 CSS 可以通过链接控制字重,比如我只想要 400 字重,那么在链接 MiSans:400,500,700 部分修改为 MiSans:400,增加同理。


OPPO 字体 - OPPO 网站

400 字重 WOFF2://www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2
500 字重 WOFF2://www.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2
该部分为 woff2 字体文件与上述 css 引入方式不同,具体看下述说明。


OPPO 字体 - MasterGo 网站

400 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2
500 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2
600 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Bold.woff2
700 字重 WOFF2://static.mastergo.com/static/font/OPPOSans/OPPOSans-Heavy.woff2

该部分为 woff2 字体文件与上述 css 引入方式不同,具体看下述说明。


阿里巴巴普惠体 - 阿里巴巴网站
该部分查看 https://fonts.alibabagroup.com/#/font

2.字体引入方式

CSS 文件

方式一、在 html 中直接引入:


方式二、在 css 中引入:
@import url('.css');
woff 文件

在 css 中引入
@font-face {
 font-family: OPPOSans; //定义字体名称
 font-weight: 400; //定义字重
 font-display: swap;
 src:url('.woff2') format('woff2'); //字体链接
}
上述字体列表链接中,若是 css 链接可直接引用,若是 woff 字体链接需在你的 css 文件中引入。


3.引入字体方式

引入字体文件后,在需要使用的元素处设定 css 属性 font-family 中输入字体名称即可


4.字重说明

浏览器默认字重 400,假如对标题想要使用粗体该如何操作呢?在设定字体字重时会有两种不同的呈现效果方式。
情况一、对不同字重文件使用相同字体名称引入

例如下述两个不同字重文件都使用 OPPO-Sans 名称:
@font-face {
 font-family: OPPO-Sans;
 font-weight: 400;
 font-display: swap;
 src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2) format('woff2');
}
@font-face {
 font-family: OPPO-Sans;
 font-weight: 500;
 font-display: swap;
 src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2) format('woff2');
}
那么在对 h1 这个部分引用时,如何使用字重 500 的字体呢?只需要设定 font-weight 属性为 500 即可。即下述:

普通元素在引入 400 字重时
div {
 font-weight: 400;
}
标题元素在引入 500 字重时
h1 {
 font-weight: 500;
}
情况二、对不同字重文件使用不同字体名称引入

例如下述两个不同字重文件使用不同字体名称:
@font-face {
 font-family: OPPO-Sans-Regular;
 font-weight: 400;
 font-display: swap;
 src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2) format('woff2');
}
@font-face {
 font-family: OPPO-Sans-Medium;
 font-weight: 500;
 font-display: swap;
 src: url(//static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2) format('woff2');
}
那么在引用时,只能使用当初设定该字重的字体名称。即下述:

普通元素在引入 400 字重时
div {
 font-family: OPPO-Sans-Regular;
}
标题元素在引入 500 字重时
h1 {
 font-family: OPPO-Sans-Medium;
}


5.font-display: swap 说明

你会发现很多引入字体的文件都会标注这个属性,它的作用是在没有加载出字体前,优先加载本地字体进行渲染,避免网页出现空屏。

标签:

相关文章

FastAdmin add/edit方法不更...

问题:fastadmin的add/edit方法无法保存数据,检查了页面,name=row['name']正常传送,检查controller,也是默认的方法,什么也没有动可就是无法保存数据。解决:经过仔细研究发现,原来是h...

Uniapp开发小程序和app时,根据登录状...

在使用uniapp开发app和小程序时,经常会用到打开app/小程序时,根据登录状态判断是显示首页还是跳转登录页的功能。此功能在app.vue的onlaunch方法中定义,方法如下:onLaunch: function() { cons...

网易企业邮箱客户端SSL端口设置

最近经常配置OJS系统的(Open Journal Systems期刊管理系统 )发信功能,客户使用的是网易企业邮箱,根据网易企业邮箱帮助中心的文档显示,smtp服务加密ssl的端口是994,如图:结果设置了以后,怎么也发不了邮件,就在...

Css中Flex布局下两边高度不一致的解决方...

在css中,flex弹性布局可以实现内部对象左右、垂直的对齐,在多个html对象中,设置flex后一般情况下,内部的对象高度是保持一致的。比如一个div设置了flex,内部有3个div,这3个div的高度以最高的一个div高度值为准保持...

推荐文章

微信公众号如何集成对接网站网页

微信公众号可以把官网的网页集成进去吗?想通过微信公众号实现打开公司网站的页面,具体要怎么实现呢?其实这个功能,可以通过微信菜单的方式来实现...

PhpStorm怎么取消html文件中sty...

phpstorm程序中,在打开html时总会出现对 style属性的折叠和隐藏,这样在检查代码的时候非常不直观,容易漏掉很多东西,非常的不方便,如图:

微信小程序从开发到实现微信支付的全过程

微信小程序部分一、完善小程序基本信息1.用管理员账号登录微信小程序(https://mp.weixin.qq.com/);2.左侧菜单选择首页;3.完善小程序的基本信息,包括小程序名称、小程序类目、微信认证、微信备案等。二、小程序开发配置1...

php拼装sql语句,换行查询出错的问题解决

在php代码中,遇到复杂的sql语句,需要拼装sql语句,如:$sql='id 10;' $sql=' and( status in(1,2,3,4,5) and id not in (select id from ...