admin

免费引入商用黑体字体系列整理及 CSS 字体

admin 分享 2023-03-16 3511浏览 0

由于微软雅黑的设计太过老旧,所以很多网站在设置font-family字体家族时,都会首先引入苹果的苹方字体(PingFang SC)。一来为了照顾 MAC,二来可以改善 Windows 上显示效果(已安装苹方字体的前提)。现在,一些厂商会在官网上引入自己研发的字体。感谢各大厂商没有禁止 woff 字体文件跨域使用,可以让我们白嫖,因为你们的字体是真的漂亮,并且以下字体可以个人免费使用。


字体列表及引用链接

字体名称类型服务商公开性格式字重链接
字体合集通用Google//https://fonts.google.com(需 VPN)

通用Adobe//https://fonts.adobe.com(需授权)

通用阿里巴巴//https://fonts.alibabagroup.com

通用阿里巴巴//https://www.iconfont.cn/fonts/index
阿里巴巴普惠体通用阿里巴巴//https://fonts.alibabagroup.com/#/font
阿里妈妈数黑体通用阿里巴巴//https://fonts.alibabagroup.com/#/more
钉钉进步体下载文件阿里巴巴TTF700https://page.dingtalk.com/wow/dingtalk/default/dingtalk/y-W5aF3_ZJwzulU0nceIl
斗鱼追光体下载文件斗鱼TTF700https://www.douyu.com/topic/douyuZGT
Noto Sans网页引用#1GoogleCSS多种https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap
Mi Sans下载文件小米TTF多种https://cdn.cnbj1.fds.api.mi-img.com/vipmlmodel/font/MiSans/MiSans.zip

网页引用#1小米CSS多种https://font.sec.miui.com/font/css?family=MiSans:400,500,700:Chinese_Simplify,Latin&display=swap
HarmonyOS Sans下载文件华为TTF多种https://developer.harmonyos.com/cn/docs/design/des-guides/font-0000001157868583

网页引用B 站CSS400https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css





500https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css
OPPO Sans下载文件OPPOTTF多种https://www.coloros.com/index/newsDetail?id=72

网页引用#3OPPOWoff2400https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2





500https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2

网页引用#2MasterGoWoff2400https://static.mastergo.com/static/font/OPPOSans/OPPOSans-Regular.woff2





500https://static.mastergo.com/static/font/OPPOSans/OPPOSans-Medium.woff2





600https://static.mastergo.com/static/font/OPPOSans/OPPOSans-Bold.woff2





700https://static.mastergo.com/static/font/OPPOSans/OPPOSans-Heavy.woff2
华康金刚黑#4网页引用字节跳动CSS400https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap





500https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap

  1. CSS 可以通过链接控制字重,比如我只想要 400 字重,那么在链接 MiSans:400,500,700 部分修改为 MiSans:400,增加同理。

  2. 2022 年 11 月 17 日发现已关闭跨域请求,链接仅供下载使用了。

  3. OPPO 的在线引用 WOFF2 截取了 5000 字,因此在一些不常用的字上回出现不显示的情况

  4. 华康金刚黑实际和苹方是一个字体,因此需要授权才可使用。虽然 cdn 是可以跨域使用,但请谨慎。

引入字体

上述字体列表链接中,若是 css 链接可直接引用,若是 woff 字体链接需在你的 css 文件中引入。具体方式见下:

CSS
方式 1	在 html 中直接引入:<link rel='stylesheet' href='链接.css'>
方式 2	在 css 中引入:@import url('链接.css');
WOFF2
在 css 中引入
@font-face {
	font-family: OPPOSans;	//定义字体名称
	font-weight: 400;	//定义字重
	font-display: swap;
	src:url('链接.woff2') format('woff2');	//字体链接
}

完成上述引入字体文件后,那么在需要使用的元素处设定 css 属性 font-family 中输入字体名称即可,注意:字体名称要和引用的字体名称相同。

字重说明

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

情况一
例如下述两个不同字重文件都使用 OPPO-Sans 名称,但在引入字体时设置了不同的字重和链接:
@font-face {
	font-family: OPPO-Sans;
	font-weight: 400;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
	font-family: OPPO-Sans;
	font-weight: 500;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}那么在对 h1 这个部分引用时,如何使用字重 500 的字体呢?只需要在实用的元素设定 CSS 属性 font-weight 为 500 即可。即下述:div { font-weight: 400; }	// 普通元素在引入 400 字重时
h1 { font-weight: 500; }	// 标题元素在引入 500 字重时
情况二
例如下述两个不同字重文件使用不同字体名称,在引入字体时也设置了不同的字重和链接:
@font-face {
	font-family: OPPO-Sans-Regular;
	font-weight: 400;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
	font-family: OPPO-Sans-Medium;
	font-weight: 500;
	font-display: swap;
	src: url(//code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2) format('woff2');
}那么在使用不同字重时,只能使用当初设定该字重的字体名称。即下述:div { font-family: OPPO-Sans-Regular; }	// 普通元素在引入 400 字重时
h1 { font-family: OPPO-Sans-Medium; }	// 标题元素在引入 500 字重时

你会发现,无论是否使用相同名称,font-weight 的值都必须要与实际的字体字重文件匹配。若使用不同的字体名称,一方面增加代码工作量,另一方面还不易解读。因此,通过两个字重的使用方式,如果从便于管理的角度来看,情况一更为方便。

font-display swap 说明

你会发现很多引入字体的文件都会标注这个属性,它的作用是在没有加载出字体前,优先加载本地字体进行渲染,避免网页出现空屏。若您想了解关于该部分的研究资料及加载字体所带来的影响,推荐您查看该文章《知乎:一种减少字体加载影响的新方法:CSS 字体描述符(译)》

unicode-range 优化说明

当你引入官方的 css 字体链接后,有些文件里的一个 unicode-range 属性引起了你的注意,这个属性的作用是规定不同的字符加载不同字符集文件。通俗讲我们会把一个字体分成多个字符集,然后按需加载。例如一个页面只有 500 个字,但是这 500 个字恰好都在一个字符集里面,那么其他的字符集就不需要加载,换句话说就不需要加载整个字体文件,因此节省了流量和优化了加载速度。

使用该优化方式的上述链接中有:思源黑体(谷歌)、小米字体(小米)、鸿蒙字体(B 站)、华康金刚黑(字节跳动)

字体文件格式

本文一律使用 woff2 字体格式,在如今浏览器趋于 Chromium 内核的潮流下,作为个人站点可以不需要考虑旧版本浏览器的兼容性。若您想了解其他字体格式,推荐您查看《知乎:关于字体格式》



版权声明:
    “邓先生工作室”文章为自撰和网摘为一体,网摘文章及图片版权归原作者所有,转载本文请注明出处,请勿用于商务用途。如有侵犯您的权益,请及时联系toneydeng@qq.com予以删除!
发表评论