
作为界面设计师我们都知道,移动设备屏显字体大多使用默认系统自带的无衬线字体,例如 iOS 的中文 PingFang 系列,Android 的中文 Source Han Sans 思源黑体或者其他国内厂商 Rom 中优化的各种无衬线黑体(例如小米版兰亭黑、华为使用的方正兰亭黑等等)。
移动屏显中文字体多以无衬线体为主,主要原因是字体受屏幕分辨率的影响,笔画粗细多变的衬线体在屏幕上的显示效果远远没有简洁干净线条感的无衬线体效果好。随着屏幕技术的发展,显示精度不会成为阻碍字体选择重要原因,国内越来越多的阅读类/内容类 App 通过内置或者 API 调用 Webfont 字体实现屏显中文衬线字体。
西文字体文字部分由 26 个字母组成,所以字体文件通常不会太大;而中文汉字数量总共约有 90000 左右, 国标 (GB) 字库有 6763 字, 根据《现代汉语常用字表》统计数据,常用汉字也要有 3500 个左右。 中文字体文件通常都会几 M 的大小,参照网络环境显然中文 WebFont 不适合在项目中使用。
西文 WebFont 服务提供商有著名的 Google Fonts、Typekit等等,但中文 WebFont 服务商国内较少,除了各大体厂商针对其售卖后的版权字体进行嵌入式优化(减少中文字体容量),技术侧有知名的 Font-Spider(字蛛)解决 webfont 优化压缩方案,接下来介绍另外两种方法:
方法一 中文 Webfont 服务调用
中文 Web Font 服务提供商:有字库,通过使用在线云字体服务实现中文衬线字体

使用「有字库」在线云字体服务,在”字体列表中“搜索”思源宋体“,然后再搜索列表中选中需要调用的字重,点击”立即使用“,在在线字库字体详情页有具体的使用方法,可以帮助你轻松实现调用 WebFont,看看下方的 Demo。

方法二 Adobe Fonts 调用

通过 Adobe Fonts 的 Webfont 字体服务 Js 调用方法实现,打开 https://fonts.adobe.com/,搜索”Source Han Serif“,在搜索结果中根据自身需求选中相应选项「Simplified Chinese」or 「Traditional Chinese」,简体 or 繁体中文。

在选中的类型之后的字体列表中,点击”Add to Web Project“链接,在弹窗列表中选择”项目“和字体字重后,Create。

复制弹窗中的 Js 代码到的 Web 项目中调用即可。

除了上述方法外,还有一种纯 JavaScript 字体子集化方案 Fontmin,有兴趣的盆友可以自行搜索了解一下。
参考资料:
https://source.typekit.com/source-han-serif/cn/
https://fonts.adobe.com/fonts/source-han-serif-simplified-chinese
https://blog.csdn.net/matiascx/article/details/76419405