宇由于微软雅黑的设计太过老旧，所以很多网站在设置font-family字体家族时，都会首先引入苹果的苹方字体（PingFang SC）。一来为了照顾MAC，二来可以改善Windows上显示效果（已安装苹方字体的前提）。
更新说明
20240915更新说明
1. 去除失效链接
2. 增加MiSans可变字体链接
3. 增加快看世界体
20230606更新说明
1. 增加了阿里妈妈系列三款字体：方圆体/灵动体/刀隶体web引用链接
20230405更新说明
1. 增加了钉钉进步体、阿里妈妈东方大楷web引用链接
20230312更新说明
1. 增加了钉钉进步体和斗鱼追光体文件下载链接，但暂未有web引用链接
2. 标注华康金刚黑授权性质，请谨慎使用
3. 优化排版
20230306更新说明
1. 增加了阿里妈妈数黑体cdn链接
2. 标注CDN公开性质
3. 优化部分说明文案
4. 优化排版
20221123更新说明
1. 2022年11月17日发现OPPO字体 – MasterGo网站已关闭跨域请求，链接仅供下载使用了。
2. 增加了unicode-range优化说明
字体列表及引用链接
专题站点
网页引入
| 字体名称 | 服务商 | 字重 | 链接 |
|---|---|---|---|
| Noto Sans | 可变 | https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap | |
| Mi Sans | 小米 | 多种 | https://cdn-font.hyperos.mi.com/font/css?family=MiSans:0:Chinese_Simplify,Latin&display=swap |
| 可变 | https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap | ||
| HarmonyOS Sans | B站 | 400 | https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css |
| 500 | https://s1.hdslb.com/bfs/static/jinkela/long/font/medium.css | ||
| OPPO Sans 1 | OPPO | 400 | https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Regular.woff2 |
| 500 | https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2 | ||
| 华康金刚黑 2 | 字节跳动 | 400 | https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-Regular&display=swap |
| 500 | https://fonts.bytedance.com/dfd/api/v1/css?family=DFPKingGothicGB-medium&display=swap |
引入字体
上述字体列表链接中，若是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(OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
font-family: OPPO-Sans;
font-weight: 500;
font-display: swap;
src: url(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(OPPOSansOS2-5000-Regular.woff2) format('woff2');
}
@font-face {
font-family: OPPO-Sans-Medium;
font-weight: 500;
font-display: swap;
src: url(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内核的潮流下，作为个人站点可以不需要考虑旧版本浏览器的兼容性。若您想了解其他字体格式，推荐您查看《知乎：关于字体格式》
结语
就windows上的清晰效果而言，无论你使用何种字体，都没有在windows经过特殊优化的微软雅黑更好。如今当你在windows安装苹方字体后，你会发现苹方字体的显示效果也十分漂亮，这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在Windows经过特殊优化的字体，也会在Windows上大放异彩。