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

字体列表及引用链接
鸿蒙字体 - 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

引入字体方式
CSS 文件
方式一、在 html 中直接引入:
<link rel='stylesheet' href='.css'>
方式二、在 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 文件中引入。

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

浏览器默认字重 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;
}
font-display: swap 说明

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

字体文件格式

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

结语

就 windows 上的清晰效果而言,无论你使用何种字体,都没有在 windows 经过特殊优化的微软雅黑更好。如今当你在 windows 安装苹方字体后,你会发现苹方字体的显示效果也十分漂亮,这是因为科技的进步使得显示器分辨率越来越清晰。所以就算使用没有在 Windows 经过特殊优化的字体,也会在 Windows 上大放异彩。