「关于字体的一些吐槽和笔记」

关于字体的一些吐槽和笔记

2023/03/13 字数统计： 4.3k 阅读时间： 7 mins 访问次数： ... 评论统计： ...

　　起因是前几天 bgme 挂了，一边丧失画画动力一边含泪动森一边想着：「啊我要自己建个实例！」然后一直摸到今天才终于开始搜索部署教学。
　　其实 mastodon 更新之后我对他的前端设计已经好感全无，有试图投奔 misskey 或 pleroma 的念头，但是后两者的中文教学并不太常见，不过今天的重点并不是这个……重点是我在某篇中文部署教学的 blog 上发现了一个看起来不错的字体，用我实战派的前端技巧搜索发现这个字体是「造字工房悦圆」，于是就突然想写一些关于 webfont 与中文字体使用的心得分享。

关于 Webfont 的毕生所学

　　因为这次的文章加了#建站指猫的 tag，所以也会努力地按照「即使车祸失忆了读一遍也能按步骤复现」的原则写。当然这两年里我的代码水平进步了不少，所以初学者理解不了但我意识不到的盲区也会越来越大，我只能说尽力而为。
　　但是也不一定有人看啦哈哈【~~难道不是一定没有人看吗~~

Webfont 与普通字体样式的对比

　　目前这个站的正文字体使用的还是普通字体 css~~已经换上 google webfont 了~~，但因为使用的是黑体（Noto sans）以及方引号，所以即使退回成微软雅黑或是手机自带字体阅读也不会有特别大的不适感。但有一个非常明显的问题是由于我的加粗字符是用调整 字重 实现的，导致在手机上浏览的时候无法显示加粗样式，因为手机默认字体一般是不支持 font-weight 属性的，~~至少我的手机不能~~。
　　所以 webfont 的优势显而易见就是可以让你的字体与你的网页同步上传并一起被读取，但同样也存在缺陷，那就是字体文件的加载可能会拖慢整个网页的加载速度。
　　简体中文单个字体文件的大小在 3M 左右，虽然在 5G 时代这点数据微不足道，但 github pages 在墙内的访问速度是非常感人的。我 blog 上的每张图片尺寸都压缩在 1M 以下，在墙内环境下还是只能看着它们以肉眼可见的速度逐行加载。编码齐全的字体文件尺寸就更加惊人，比如 Noto Sans CJK 单个字重的文件大小在 15M 以上，这个大小的资源如果要放上网页无论如何都是要掂量一下的了。

基本语法

@font-face {
    font-family: 'FontName';
    /* 你需要在 css 中引用的字体名 */
    src: url('/.../FontName.woff2') format('woff2'),
         url('/.../FontName.woff') format('woff');
         /* 字体的存放路径 */
}

　　另外附上一个 ttf to woff 的转换网站。

字重设置

　　依旧以 Noto Sans 为例，我本地上的字体文件有 7 种不同的字重，在网页上为了区分常规和粗体，也需要引用至少两个字重的文件。
　　在常规 css 文件中设置 font-weight 是会自动匹配同名不同字重的字体的，如果要在 webfont 中延续这一特性，我们需要为两个字体文件指定相同的引用名以及不同的字重和它们对应的文件路径，具体示例如下：

@font-face {
    font-family: 'Noto Sans CJK SC';
    src: url('Noto Sans CJK SC Regular.woff2') format('woff2'),
         url('Noto Sans CJK SC Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Noto Sans CJK SC';
    src: url('Noto Sans CJK SC Bold.woff2') format('woff2'),
         url('Noto Sans CJK SC Bold.woff') format('woff');
    font-weight: 800;
}

　　设置完毕后当 font-weight 设置为 400 时就会引用 Noto Sans CJK SC Regular，而字重为 800 时则引用 Noto Sans CJK SC Bold。

加载优化

　　以下是一些针对中文字体的优化方案。
　　因为我没写 4 级小标题的 CSS 所以暂时用列表来分一下段【
　　23/03/17 更新：写好了【

方案 1：匹配本地同名字体

　　在 font-face 的引用链接之前添加 local 字符段，例：

@font-face {
    font-family: 'Noto Sans CJK SC';
    src: local('Noto Sans CJK SC Regular'),
         url('Noto Sans CJK SC Regular.woff2') format('woff2'),
         url('Noto Sans CJK SC Regular.woff') format('woff');
    font-weight: 400;
}

　　浏览器会优先匹配本地同名字体，如存在对应的字体则不会再下载网络资源。

方案 2：设置 font-display

　　在 @font-face 中添加 font-display 属性，例：

@font-face {
    font-family: 'Noto Sans CJK SC';
    src: local('Noto Sans CJK SC Regular'),
         url('Noto Sans CJK SC Regular.woff2') format('woff2'),
         url('Noto Sans CJK SC Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

　　font-display 是用于处理「当字体文件下载未完成时，网页如何显示」的设置项，可选参数分为以下 5 种：

block
字符默认显示为空白字符，等字体下载完成后以 webfont 重新渲染
swap
字符优先使用回退的后备字体渲染，等字体下载完成后以 webfont 重新渲染
fallback
先显示为空白字符，超过 100ms 后渲染后备字体，字体下载完成后渲染 webfont
auto
由浏览器决定如何处理（一般情况下会以 block 的方式渲染）
optional
先显示空白字符，超过 100ms 一段时间后直接显示后备字体

　　高亮的超时阈值是浏览器的默认设置，理论上可以更改，但我没找到具体的方案。个人审美里适用中文的加载方案只有 swap，因为很显然绝大多数中文字体是绝对无法在 100ms 内下载完毕的。

方案 3：拆分字体文件

　　绝大部分中文字体托管网站（包括 Google Fonts）使用的加载优化方案，原理是将整个字体文件按照 unicode 编码集拆分为若干文件，渲染字体时通过 unicode-range 按照编码查找对应的字体文件进行下载，如页面上没有某个编码集中的字符则不会请求资源。
　　这个方案尤其适合像 Noto Sans CJK 这样的多语言合集包，比如我的页面上会出现中日双语但不会出现韩文，韩语部分的字符就不会占用下载时间。
　　缺点是很显然这个方案存在一定技术门槛；此外由于字体文件是分批加载的，所以在所需的全部字体文件加载完毕之前页面会不断进行重新渲染，视觉效果就是字符不断地分批进行「变形」。我个人觉得这种效果还挺有趣的，但有些人并不喜欢。不过客观来讲这确实是目前兼顾加载与显示效率的中文 webfont 最优方案。
　　此外还有一个隐形的问题是对于字体文件的拆分涉及到修改与编辑，很有可能超出部分字体「免费使用」的行为范围，当然如果只使用开源字体的话是不需要考虑这个问题的。
　　因为我目前还没有开始折腾，所以先提供一个现成的库：中文 Web 免费可商用字体库 v3

中文免费字库来源

　　这里不仅是 webfont 还会包含一些日常使用的场合，可以算是一个个人爱用中文字体整理？

仓耳屏显字库

　　全站字库可免费下载 + 免费个人非商使用。
　　值得一提的是他们还有专门的个人网店（大概可以理解为盈利式个人网站？）授权，只要 88 一年，特惠字体（一些画风比较像 QQ 上 3 块钱一个月的那种订阅字体）甚至只需要 15 一年，真正做到了毫无后顾之忧。这个后顾之忧可以和后面别家的对比一下……
　　除了明确的个人授权和丰富的特惠字库以外还有 6 款开源字体，可用于免费使用、研究、复制、合并、嵌入、修改、再分发已修改和未修改的字形副本，並且大小都在 1.5m 左右，当然相应的涵盖的编码较小，不过日常中文环境使用是没有问题的。
　　顺带一提这也是我平时视频字幕封面字体的主要来源，以及在他们的官网上右键审查元素可以直接获得 webfont 的 css 代码（甚至是带注释的），完全不存在再分发的问题，用了都说好。

造字工房

　　一样是全站字库可免费下载 + 免费个人非商使用。
　　但是我找不到这家对「个人非商业使用」的具体定义，因为个人网站的 webfont 很显然涉及到再分发的问题，虽然我开篇提到的那个 blog 挂满了 VPN 广告也没见坐上被告席，但是从我个人角度出发还是有些不安です。
　　另外这家并没有个人授权的标价，而企业商业授权是单款 5000 一年，5w 永久，emmm 个人用户不安加倍，虽然直觉告诉我所得不超过索赔价应该不会被告？大概吧……
　　大小是单款 1.2m 左右，但是这家的字体设计有个非常微妙的地方在于不到生死关头一般不会动字符的基本框架只会对笔画进行修改，全部放在一起不得不说看起来让人非常地审美疲劳……当然也是因为这个特性它在网页端和 web safe 字体有着非常好的适配性，在字号不大的情况下几乎可以无缝回退，但我果然还是とても不安です【
　　后注：搜索了一下其它字库的免费使用详细规约有提到「个人作品展示」不属于商业用途，但依然还是涉及到一个再分发的问题，外加这家的所有字体也并没有使用 webfont 展示而是直接输出的图片预览，我还是继续不安吧 :4o-3:

也字工厂

　　全站字库可免费下载 + 免费个人非商使用。
　　吐槽一下这家的手写体几乎都是奶酪体，看久了也是非常容易审美疲劳……

猫啃网

　　专门收集中文免费商用字体的网站，不过有相当大的比重是「带汉字的开源日文字体」。
　　另外很难受的一点是字体下载链接在百度网盘 :4o-3:

Github 发布字体

最像素 Zpix 常规版 4.22m
个人爱用的点阵字体
包含英文＋繁体中文＋简体中文＋日文
商业产品需要收取授权费用，个人和教育项目免费
需要注意的是使用规约中禁止修改、反编译、转换、拆分等反向操作
LXGW WenKai / 霞鹜文楷单字重 15m ~ 18m
轻便版 10m 左右 ~~哪里轻便了~~
基于 FONTWORKS 出品字体 Klee One 衍生的开源 CJK 字体
非常适用于正文阅读的柔和风格
但更新较为频繁，可能导致每个人手里的版本都有一定出入
作者仓库中还有若干日文字体汉化项目，不过大小都比较感人……
顺带一提霞鹜文楷是有现成的 webfont 版本的
铁蒺藜体 Tiejili 3.3m
基于 Reggae One 的开源中文字体
风格锐利的美术字，对标点排版有特殊设计
正在开发繁体版

日常吐槽时间

猫

　　这几天也不能说一直在摸……前天辅助机突然拉稀一天滋了 5 泡，提心吊胆地带去宠物医院花了近千的检查费得出结论：没什么大病就是着凉了，吃点益生菌调理一下就好。
　　那么据我观察着凉的原因：1. 前两天突然升温我把电热毯关了；2. 猫碗里的水索然无味还是玻璃窗上的冷凝水好喝。
　　总之在我写这篇东西的时候猫已经完全恢复了元气，为了让我提早复工不惜把自己作得拉稀以病相逼，她真的，我哭死 :4o-2:

中文♂程序员和他们的电子格子衬衫

　　在搜索 fedi 搭建教程的时候不幸点开了很多简中程序员的 blog，虽然在很久以前就已经做过篇幅可观的吐槽但不得不说我的审美还是受到了不小的冲击。
　　小小总结一下这些带给我视觉震撼的设计元素，或者可以说是一些电子格子衬衫：

让浏览器变得巨卡无比的动画背景
似乎是 next 主题的自带功能，就那个意味不明并且会和鼠标互动的点线组合
~~很喜欢西柚子对 next 主题的吐槽：为什么头像要转 360 度？那 ™ 不是个头吗？~~
侧边栏悬挂的微信支付宝打赏二维码 & VPN 广告
鼠标在页面上点击后随机出现的富强民主文明和谐
可以说是在视觉和精神层面遭遇了双重雷劈
这个特效还有彩色爱心和意味不明的圆形光点的版本
我的评价是可以感受到一种完全臣服于 QQ 空间的黄钻点赞特效的审美但却不愿为其付费的坚持
一定要显示留言者 UA 的评论插件
我也不知道是太菜了不知道怎么关闭显示还是把公开他人隐私数据当作一种 XP
Well 根据我网上冲浪多年的观察，我倾向于二者皆有

　　如此精致的博客装修外加拉个屎都能写出机翻 + 洗稿气势的程序员专用中文语法，我实在是看不懂也看不下去他们到底写了些什么东西。感觉 mastodon 中文部署教学多反而成为了一种门槛，因为客观事实上中文教学的数量往往和中文搜索结果中的有效信息的稀释度是成正比的。
　　横竖都要学外语我还是去看日文吧……

参考资料

中文网页字体设置方案：从 font-family 到 font-display
我忍不住要插一句这真的是我看到的难得审美正常的中文程序员 blog，我的眼睛被治愈了
Web 字体 - 学习 Web 开发 | MDN
Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか

無色人間。