给博客更换好看字体吧

本文中提及的 Light CDN 平台2024年06月起不再免费

事情是这样的，塔塔更新了博客，我兴致冲冲前去，顺藤摸瓜发现了中文网字计划这个网站，在提供美丽字体的同时，也针对中文字体做了性能优化。

好，让我研究研究这是什么好东西。

1. 挑选适合博客的字体。

中文网字提供了一系列开源字体，找找自己喜欢的。我选择了猫啃珠圆体，听名字就非常可爱对不对！

作者提供了字体的公共CDN链接和嵌入方式，可以先嵌入自己博客看看合不合适。

同时也提及到公共CDN每月流量有限，自行部署的话可以获得更稳定的效果。

① 在博客目录layouts/partials/head.html内合适位置加入字体文件css链接

<link rel='stylesheet' href='https://192960944.r.cdn36.com/chinesefonts2/packages/mkzyt/dist/猫啃珠圆体/result.css' />

此链接为公共CDN，本文中仅起到字体预览、挑选作用。

② 在css/custom.css内修改

/* 全局字体 */
html {
    font-family: "MaokenZhuyuanTi";
}

更换过几次链接和名称后，挑选到了满意的字体，接下来按教程自行做选中字体的cdn。

2. 字体分包与部署

参考教程为：字体分包部署与使用

2.1 在字体页面前往github下载该字体

2.2 在线分包

将下载字体上传至在线字体分包器，等待分包完成后，下载压缩包。

这里需要魔法上网，遇上失败报错就刷新重来。

压缩包下载至本地后解压缩。

2.3 文件上传R2

与教程不同，我选择存在cloudflare上了。

在R2中新建储存桶，位置选择亚太地区，命名任意。

创建完成后，进入该储存桶，在对象内，选择文件夹上传，将前一步解压好的整个文件夹上传。

在设置 - R2.dev 子域中选择允许访问

在设置 - CORS 策略中添加CORS策略，加入以下内容

[
  {
    "AllowedOrigins": [
      "http://localhost:1313",
      "http://im.happytoo.cyou",
      "https://im.happytoo.cyou"
    ],
    "AllowedMethods": [
      "GET"
    ]
  }
]

这里添加的是hugo博客本地预览地址和博客域名。

完成以上步骤后，回到对象，找到文件result.css，查看它的R2.dev URL

3. 设置CDN

这里使用的是教程中推荐的 LightCDN。

注册登录后，在页面上方将语言切换为简体中文。

新建CDN，来源填写 Cloudflare R2 对应储存桶 设置 - R2.dev 子域中展示的URL(不带https://)

CDN加速域名随意填写（有自己域名填一个子域名好了），实际也可以不用到。

创建成功之后，会给出CNAME

用这个cname去替换R2公共链接即可。

4. 总结

① 在博客目录layouts/partials/head.html内合适位置加入字体文件css链接

<link rel='stylesheet' href='https://xxxxx.r.cdn36.com/MaokenZhuyuanTi/result.css' />

前半截 xxxxx.r.cdn36.com 为 LightCDN 生成的cname；
后半截 MaokenZhuyuanTi/result.css 为字体分包文件在 CF R2 中的储存路径。

② 在css/custom.css内微调，将页面外观调整至自己满意的样式。

/* 全局字体 */
html {
    font-size: 1em;
    font-family: "MaokenZhuyuanTi";
}

/* 另发现代码块区域字体未调整，新增以下部分 */
code,
kbd,
samp,
pre {
  font-family: "MaokenZhuyuanTi";
  font-size: 80%;
  font-weight: lighter;
}

OK，完成！

5. 问题记录

CF R2 中尝试过使用自定义域名，在本地预览正常，推送远程仓库后，清除缓存+强制刷新，网页未显示对应字体，浏览器报错是“CORS策略”相关，非常困惑，解决不了，放弃。