Home › Q&A › Thread

关于博客引用字体的问题

✓ Answered

flight025 2023-12-09 23:35:26

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

3 Comments

yihui 2023-12-10 02:51:31 ✓ Answer

奥勒留大帝你好：

这个稍微有一丁点复杂。手机上通常没有楷体或思源宋体，而要是完整加载这些字体的话，会非常慢，因为完整的中文字体文件通常都非常大，不适合作为网络资源加载。我的办法是提取了字体的子集、保存到我的一个 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 楷体，据说是开源的。当然思源宋体也是开源的。用别的楷体也许能减小文件大小，但可能会涉及侵权，所以目前也就这样了。据我所知似乎没有其它的楷体是开源的（霞鹜字体是开源的，但它的楷体我觉得实在太不像楷体了）。

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

flight025 2023-12-10 06:09:30

谢谢谢大神的答案，我研究下😀

yihui 2023-12-11 02:59:51

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

flight025 2023-12-11 13:01:32

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

flight025 2023-12-11 15:57:43

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

yihui 2023-12-11 16:16:16

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

flight025 2023-12-13 05:14:26

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

的确可以显示楷体了。

residualsun1 2023-12-15 05:36:43

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

yihui 2023-12-15 06:20:02

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 2023-12-15 09:30:47

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

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

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

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

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

chuxinyuan 2024-04-14 10:45:31

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

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

yihui 2024-04-14 14:50:09

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 大很多，所以最后我用了后者。

	@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');
	}