关于博客引用字体的问题

[flight025]

谢益辉大神你好，我按照你的博客内容成功把引用部分变成楷体，电脑平板可以正常显示楷体。就是手机不能显示。这几天看你博客手机应用文字字体也能支持显示楷体了，这是怎么做到的？

[yihui]

奥勒留大帝你好：

这个稍微有一丁点复杂。手机上通常没有楷体或思源宋体，而要是完整加载这些字体的话，会非常慢，因为完整的中文字体文件通常都非常大，不适合作为网络资源加载。我的办法是提取了字体的子集、保存到我的一个 Github 库中，然后通过 jsdelivr 的 CDN 加载：

yihui.org/static/css/fonts.css

Lines 1 to 12 in 384bd48

	@font-face {
	font-family: 'Source Han Serif CN';
	src: local('Source Han Serif CN'), local('Source Han Serif SC'),
	local('Source Han Serif TC'), local('Source Han Serif TW'),
	local('Source Han Serif'), local('Noto Serif CJK SC'), local('Songti SC'), local('SimSong'),
	url('https://cdn.jsdelivr.net/gh/yihui/cron/fonts/SourceHanSerifCN-Regular-yihui.woff2') format('woff2');
	}
	@font-face {
	font-family: 'FandolKai';
	src: local('Kaiti'), local('Kaiti SC'), local('STKaiti'), local('楷体'), local('SimKai'), local('DFKai-SB'), local('FandolKai'),
	url('https://cdn.jsdelivr.net/gh/yihui/cron/fonts/FandolKai-Regular-yihui.woff2') format('woff2');
	}

提取子集的代码在此：https://github.com/yihui/cron/blob/main/.github/workflows/fonts.yaml

我提取的是我网站所有 .md 文件中的所有常用中文字符（4E00 到 9FFF）。子集字体的大小比完整字体会小很多，思源宋体只有不到 1 兆，楷体比较大，有 2 兆多。我用的楷体是 LaTeX 里的 Fandol 楷体，据说是开源的。当然思源宋体也是开源的。用别的楷体也许能减小文件大小，但可能会涉及侵权，所以目前也就这样了。据我所知似乎没有其它的楷体是开源的（霞鹜字体是开源的，但它的楷体我觉得实在太不像楷体了）。

所有通过网络加载的中文字体都是这个原理，即：按子集加载。霞鹜字体就是这么干的。

[yihui]

我又搜了一下，开源的楷体还有一种，叫 AR PL KaitiM GB：https://www.onlinewebfonts.com/download/157c7e79f7f057bbeacf5f113b964875 试了一下，体积能比 Fandol 小一半。

[flight025]

谢大神厉害，我换一下试试

[flight025]

我试了一下，手机引用字体还是没转换，估计是博客原本预载字体优先级显示的原因，不过还是感谢谢大神了😎

[yihui]

严格来说，字体名要是含有空格的话，需要用引号引起来：https://github.com/flight025/flight025.github.io/blob/4b53f91d57decd93b432d1c346f477bba66d6a04/css/fonts.css#L17 我不知道是不是这个原因。我自己的手机太老了，你的网页我打不开，没法帮你测试。

[flight025]

谢益辉大佬，现在博客引用部分手机

的确可以显示楷体了。

[residualsun1]

益辉你好！我这段时间也一直在琢磨如何给网站设置思源宋体。之前我是直接在仓库引用otf格式的字体，但是只能在个人电脑端显示，于是找到了这里。我想下载一份你的子集字体放到自己的仓库，然后使用jsDelivr引入，可以按照你的方法使用你放在cron文件夹中的字体吗^^？

[yihui]

jsDelivr 不限制仓库，所以我编出来的字体子集你一样可以随便用。唯一可能的问题是你的文章里用了我从没用过的生僻字，但这个可能性应该很小。如果真有这种情况，你按我的脚本自己去编就好了。

上面我说 Fandol 楷体太大了，后来我试了 AR PL KaitiM GB，如果你需要楷体的话，也可以用它：

yihui.org/static/css/fonts.css

Lines 1 to 12 in 5dd472a

	@font-face {
	font-family: 'Source Han Serif CN';
	src: local('Source Han Serif CN'), local('Source Han Serif SC'),
	local('Source Han Serif TC'), local('Source Han Serif TW'),
	local('Source Han Serif'), local('Noto Serif CJK SC'), local('Songti SC'), local('SimSong'),
	url('https://cdn.jsdelivr.net/gh/yihui/cron/fonts/SourceHanSerifCN-Regular-yihui.woff2') format('woff2');
	}
	@font-face {
	font-family: 'FandolKai';
	src: local('Kaiti'), local('Kaiti SC'), local('STKaiti'), local('楷体'), local('SimKai'), local('AR PL KaitiM GB'), local('DFKai-SB'), local('FandolKai'),
	url('https://cdn.jsdelivr.net/gh/yihui/cron/fonts/AR-PL-KaitiM-GB-yihui.woff2') format('woff2');
	}

[residualsun1]

jsDelivr 不限制仓库，所以我编出来的字体子集你一样可以随便用。

上面我说 Fandol 楷体太大了，后来我试了 AR PL KaitiM GB，如果你需要楷体的话，也可以用它：

感谢你的开源^^！我最后选择了下载你cron文件夹的思源宋体和楷体的子集字体，同时在字体文件命名中注明来自你的仓库名（如SourceHanSerifCN-Regular-from-yihui.woff2）。

唯一可能的问题是你的文章里用了我从没用过的生僻字，但这个可能性应该很小。如果真有这种情况，你按我的脚本自己去编就好了。

目前暂时没有发现这个问题，之后如果有的话再按照你的方法去编^^。

[chuxinyuan]

https://github.com/CTeX-org/ctex-kit/blob/c4bd6b888857ad675d8445ce8441a760c61b4059/ctex/ctex.dtx#L10980-L10985

CTeX 的楷体也用的是 AR PL KaitiM GB，繁体的楷体不知道怎么处理的，不知道是 fandol 还是 adobe 的开源字体。

[yihui]

CTeX 用的应该是 Fandol 楷体（它可能包含了繁体字，但我没验证），这个字体我也有编译精简版：https://github.com/yihui/cron/blob/main/fonts/FandolKai-Regular-yihui.woff2 原字体是从 CTAN 下载的：https://github.com/yihui/cron/blob/e0767b049198a4652e63ff841c2626d76f74baf3/.github/workflows/fonts.yaml#L39-L40

上面我提到过，Fandol 楷体比 AR PL KaitiM GB 大很多，所以最后我用了后者。