Home Posts Tag Me

记折腾博客（一）

Updated at 2021.02.25, 708 words, 3 mins

昨天折腾博客，弄好了样式等。因为我比较喜欢楷体字，所以首页的文章 list 的 summary 打算用楷体字展示。在网上搜了下楷体字的 font-family 后，在 css 文件里面这样写了：

p.content {
  font-family: STKaiti, KaiTi, sans-serif; 
}

写完部署后发现效果非常地棒。但是在手机上预览的时候发现，浏览器并没有如期展示楷体字，因为手机上貌似没有楷体字库。

这当然难不倒我小猪佩奇了，想起了以前的 web 自定义字体，因此我去网上下载了一个楷体字的 ttf 文件。但是下载完一看文件大小 15M（WTF！）。

这怎么能忍，于是我有找啊找，终于找到一个方正楷体字，下载完 ttf 格式是 3.8M，这还可以忍受。那有没有办法让这个文件大小更小一点呢？就我所知字体格式有 ttf、woff、woff2、eof 等，于是搜了下发现 woff 字体文件是体积最小的，然后我又去网上搜“ttf to woff”，最后下载下来发现 woff 字体竟然只有 18K！

不禁说了声牛逼，然后把代码改成了这样：

@font-face {
  font-family: 'KT';
  src: url('../font/FZKaiti.woff');
}

p.content {
  font-family: KT, sans-serif; 
}

在电脑上预览没有任何问题。但是在手机上又跪了，手机上只会把英文渲染为楷体字展示，中文不变。难道手机上中文不支持 woff？？？最后不得已，换回 ttf，然后又把代码改成了这样：

@font-face {
  font-family: 'KT';
  src: url('../font/FZKaiti.ttf');
}
p.content {
  font-family: KT, sans-serif; 
}

手机上也能正常展示楷体字了，但是有一个严重的体验问题。那就是在楷体字没有加载完成时，使用楷体字渲染的文本处都是空白的（WTF）。

最后在网上搜了一下，可以使用 font-display 属性用来做自定义字体的过渡显示，当字体没加载完成时，显示兜底字体，字体加载完后，替换为加载完的字体。最后代码改成了这样：

@font-face {
  font-family: 'KT';
  font-display: fallback;
  src: local('STKaiti'),
       local('KaiTi'),
       url('../font/FZKaiTi.ttf');
}

p.content {
  font-family: KT, sans-serif; 
}

这样一来，Mac 和 Windows 上直接显示本地的楷体字，在手机上打开页面时，先展示系统默认字体，然后等 FZKaiti.ttf 加载完后，再展示楷体字。

你可以点击这里浏览我的博客。

完。

essay