实现网站自定义的字体
# 前言
可以看见，我的网站全局使用了鸿蒙字体；
网站的字体默认是从 google font 的 api 里加载的；
谷歌的字体库中文字体少的可怜，没有自己喜欢的；
如果想要修改自己喜欢的字体，那就继续看这篇文章吧！
# 实现
# 寻找字体
网络上有很多字体网站，如 100font、字由或者其他渠道的字体；
找到自己喜欢的，下载下来，格式一般为
ttf
# 转换字体格式
web 中字体可能会用
woff、woff2、eot等其他格式，所以需要转换下
这里推荐一个好用的字体转换网站：Online @font-face generator — Transfonter
进入网站后，点击
Add fonts上传自己的字体在下方的
Formats里，全部勾选，其他选项保持默认，点击Convert进行转换转换完成后，点击
Download下载下来，会获得一个压缩包，里面是各个格式的字体，转换字体即完成
# 上传字体
- 解压压缩包，获得文件夹
- 如果有购买自己的 CDN 或者存储桶之类的，（防盗链如果要加，要留白名单），上传文件夹上去，获得各种格式的字体的链接
- 也可以使用百度加速、又拍云、jsDelivr 等 CDN，免费额度够用了
# 修改代码
找到
themes\shoka\source\css\_common\scaffolding\base.styl;大概 130 行左右，仿照引入 iconfont 的方式，引入自己的字体
新增代码，使用 css 的
@font-face：@font-face {font-family: '字体名称'; // 这个名称后面会用src: url('字体.eot'); // 放入对应格式字体的链接，下面都是一样的src: url('字体.eot?#iefix') format('embedded-opentype'),
url('字体.woff2') format('woff2'),url('字体.woff') format('woff'),url('字体.ttf') format('truetype'),url('字体.svg#ic') format('svg');}找到主题的
yml文件，在font下修改字体的样式：font:
enable: true
# Font options:# `external: true` will load this font family from `host` above.# `family: Times New Roman`. Without any quotes.# `size: x.x`. Use `em` as unit. Default: 1 (16px)# Global font settings used for all elements inside <body>.global:
external: true
family: Mulish #全局字体修改，改成刚才的字体名称
size:
# Font settings for alternate title.logo:
external: true
family: Fredericka the Great
size: 3.5
# Font settings for site title.title:
external: true
family: Noto Serif JP
size: 2.5
# Font settings for headlines (<h1> to <h6>).headings:
external: true
family: Noto Serif SC
size:
# Font settings for posts.posts:
external: true
family:
# Font settings for <code> and code blocks.codes:
external: true
family: Inconsolata
根据不同位置的字体需要，改相应部分的字体的
family为刚才引入的字体名称
完成！
