# 前言

最近有朋友在评论区问起博客自定义字体的配置方案,的确这也是我针对 vdoing 主题改造比较满意的一个点,今天特别来分享一下。

不敢略人之美,提前表达谢意:我的配置是请教 vdoing 群友 terwer (opens new window) 所得,在此进行感谢。

# 如何配置

实际上配置起来也是比较简单的,这里我把之前自己曾做过的一个 vdoing (opens new window) 模板站来举例子。

只需要两个地方的配置即可实现此效果。

首先直接克隆上边的模板仓库,然后把 fonts 目录拷贝到你的 public 目录下。fonts 目录在:docs/.vuepress/public/fonts

第二步,将如下代码内容添加到 docs/.vuepress/styles/index.styl 文件中,也可直接点击跳转参考这个文件:index.styl (opens new window),从第1行到第798行均为字体定义部分。

然后直接预览你的项目,就可以看到已经生效了。

# 注意点

  • 如果你有专门的资源域名,事实上你可以把 fonts 目录上传到你的对象存储中,然后把上边所有加载资源的地址,替换为正确的域名也是可以的。
  • 因为我上边的示例项目并非监听在 / 路由,所以在加载文件的时候需要带上 /vdoing-template 这个路由层级,如果你的博客直接监听在跟路由,则放在 public 目录下之后,就直接用 /fonts/LXGWWenkai/lxgwwenkai-regular-subset-119.woff2 即可。
  • 最后,enjoy it~