记折腾博客(一)

· 605 words · 4 min

The content of this article has been deprecated and its content may be out of date. No longer updated, for reference only.

昨天折腾博客,弄好了样式等。因为我比较喜欢楷体字,所以首页的文章 list 的 description 打算用楷体字展示。在网上搜了下楷体字的 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 加载完后,再展示楷体字。

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

完。

Chore