使用 CDN 或直接引入的方式，更换网站中文字体

看腻了原先的字体，亦或是想满足独树一帜的设计欲望？不妨更换一下网站的字体吧！

引入字体文件

这里提供两种引入的思路，一种是 CDN 引入，一种是本地引入。建议通过 CDN 的方式引入，可以大大提高加载效率。

引入 CDN 字体文件

以更换字体为思源黑体（Google 字体上叫 Noto Sans，Adobe 版本叫 Source Han Sans）为例，考虑到中文站点面向的读者在国内，无法直接下载思源黑体这款 Google 字体，因此考虑需要通过第三方 CDN 的方式引入它。据笔者测试，目前找到了这四个 CDN 站点能够使用：

https://fonts.googleapis.cnpmjs.org
https://fonts.font.im，可参考：http://www.googlefonts.cn/old
https://fonts.proxy.ustclug.org
https://fonts.loli.net，可参考：https://sb.sb/blog/css-cdn

使用方法非常简单，在 Google 字体上选择思源黑体简体中文版本，再选择需要的字重如 Regular 400，如果使用 <link> 的方式引入，则代码如下所示：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">

使用 CDN 加速的方式，只需要将上面代码中的 https://fonts.googleapis.com 更换为前边对应 CDN 站点名即可。例如使用中国科学技术大学的镜像站加速，应修改代码如下：

<link rel="preconnect" href="https://fonts.proxy.ustclug.org">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.proxy.ustclug.org/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">

然后将上面这段代码放到网页的代码片段（例如 index.html）中即可。

这段代码同时定义了一个名为 Noto Sans SC 的字体族，在后面就可以直接使用这个值引入字体了。

直接引入本地字体文件

以更换字体为未来荧黑为例，首先，去开源的 Realease 页下载字体文件。其中，以 GlowSansSC 开头的字体为未来荧黑的简体中文字体。这里我选择下载了 GlowSansSC-Normal-v0.92.zip。

解压之，可以很多不同字重的 .otf 字体文件，这里我选择了 GlowSansSC-Normal-Book.otf。将字体文件复制到网页目录（例如 font）下。

编辑网页的 CSS 文件，添加新的 @font-face 如下：

@font-face {font-family: 'Glow Sans SC';src: url('font/GlowSansSC-Normal-Book.otf');
}

我们定义了一个名为 Glow Sans SC 的字体族，在后面就可以直接使用这个值引入字体了。

其中，url 路径 font/GlowSansSC-Normal-Book.otf 表明 font 目录在该 CSS 文件的所在目录下。您应当根据实际情况灵活调整。

这种方式的优点是：配置方便。

但缺点也很明显：慢！尤其对于大多数人建立个人博客时，会使用自己的“小水管”服务器，字体文件要加载老半天才能正常显示出来（包括中文的字体文件大约 9 MB 左右，而下载速度大约为 200 KB/s）。

更换网站字体

接下来，只需要修改 CSS 文件中所有选择器的 font-family 属性，就可以实现更换字体为思源黑体了。例如：

* {font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei','Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC','Source Han Sans CN', 'Source Han Sans TC', 'Noto Sans CJK TC','WenQuanYi Micro Hei', SimSun, sans-serif;;
}

如果使用示例中本地引入的方式，在这里只需要在 font-family 最前面加上（或修改为） Glow Sans SC 就可以更换字体为未来黑体了。

浏览器顺序使用字体，如果前面的字体没有，则依次使用后面的字体。

参考文章

「为 Archer 主题更换字体」，本文基于笔者撰写的此博客简化而来
「網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析」