Skip to the content.

首页 | Blogs | 项目合集 | Bilibili↗
←返回 | 创建:2025-01-07 | 最后更新:2025-01-12

[x] 以下内容仅供个人学习交流,在部分国家/地区非法爬取资源是违法行为,作者不对您的行为及产生的任何后果负责。

[i] 文章中出现的「印品鸿蒙体」仅作展示字体样式,没有用于嵌入式网页字形或是文章字体显示等用途,本网站也不提供该字体下载等服务。该字体使用需要授权,请咨询印品字体官方。

背景

印品鸿蒙体

《绝区零》的字体是印品鸿蒙体฿,这个网上只有Regular版本流传。
但是根据比对,《绝区零》的字体是印品鸿蒙体的BoldThin版本,后者不是公开版本,推测是米哈游定制的细体版本。
不是这Regular都快和Heavy Bold一样粗了哥们

在浏览器中加载字体

字体分包

现在要在浏览器中加尤其是含中日韩文字的字体一般都不直接引用源文件,而是采取字体分包。

包含这些字符的字体文件过大,直接引用速度较慢;将字体分包,即将字体按不同unicode区间分为多个子字体,每个子字体仅包含一部分字形。 CSS中有个特性是unicode-range฿,定义后浏览器仅会加载匹配的字形资源。 这两个特性一结合,就可以把源字体分为多个100KB左右的子字体,并设定unicode-range,让浏览器不必下载全部字体文件就可以渲染字形。

分包后的字体对提取源字体的干扰在于:

定义字体

字体按MDN规范需要这样定义:

了解这些规范,要在HTML中提取字体关键就在于找到font-facefont-family字段。

实践

出现了印品鸿蒙体(尤其是细体)的官方页面随便找可以找到「调频」详情页、公告页、首页฿《云·绝区零》首页฿
很明显,前面两个都是游戏内出现的网页,要爬取字体必须先抓包获得URL。
——那太复杂了,就先从后面两个入手吧。

在网页中打开DevTools,随便找个文本改成各种网页内没有的字体,看看浏览器会不会渲染这种字体,就可以看出来当前页面定义的字体是否是完整字库。
当然,源字体就没这些字形的除外

经检查,云绝区零的页面符合这个特性,那么可以从这里入手看看。
提取字体无非就是找font-face中的src字段;而能定义font-face的,就只有CSS文件和HTML自己了。
先去看看font-family里面是啥字体名,再去找定义这个字体名的font-face的,就是一般思路。


或者你也可以取巧,直接在DevTools的Network里面看看有哪些字体被加载了。
不过这不是万能的,万一网站的字体分包过多,那里面一堆杂乱字体,怎么看?
——出现这种情况那一般也没什么希望了,就算找到了CSS定义也是一堆分包。

最后很顺利,这个源字体被写到定义里面了,下下来看看。


利用惊人注意力可以轻松注意到就是这个Bold版本和《绝区零》安装包里面的字体是一样的,哈希校验通过的那种。
此外值得关注的是,这个BoldThin版本在字体信息里面都叫Regular版本,不知道导入Word等软件会不会冲突。

找完字体可以去中文网字计划฿里面看看字体字形覆盖率信息。

结语

其实仔细看来,印品鸿蒙体的字形做的不是很好,过于重的字重、英文的不协调、字体的不对齐,作为一款非衬线字体而言还没有思源黑体设计好……
况且,这个细体版本把这些缺点暴露得一览无余啊——特别是这个g,都不和其它字母对齐,汉字笔画也是粗细不均的感觉……