原文链接: 使用 font-spider 对 webfont 网页字体进行压缩
随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。
例如,个人博客的首页字体:
CSS3 引入的 @font-face
这一属性可以很好的解决这个问题,可以帮助我们非常灵活的使用一些特殊的字体,即使用户电脑里面没有安装这个字体,网页也可以显示。
EOT
字体是 IE 浏览器的首选格式,其他浏览器都不支持;其他浏览器更钟爱常见的 TTF
、SVG
、WOFF
。
基本语法如下:
@font-face {
font-family: <自定义一个字体的名称>;
src: url('<下载好的字体,在电脑中保存的路径>');
font-variant: ;
font-stretch: ;
font-style:
- 请将
中的文字换成你自己的网站的文字。你可以选择将你的博客所有文章内容全选,然后粘贴到此处。 - 下载你想使用的字体到
fonts
文件夹,然后将 index.html 中的换成你下载的字体的前缀。
特别说明:@font-face
中的src
定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
下面是中文字体对应的英文名称:
新细明体:PMingLiU
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
装Office会多出来的一些字体:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei
苹果电脑中的字体:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
丽黑 Pro:LiHei Pro Medium
丽宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果丽中黑:Apple LiGothic Medium
苹果丽细宋:Apple LiSung Light
压缩本地 WebFont
然后执行下面的命令来压缩本地 WebFont:
$ fsp local index/index.html
哦对了,你需要先通过 npm 安装 fsp 命令:
$ npm i font-spider-plus -g
压缩完成后,就会在 fonts 目录下生成压缩后的字体文件:
$ ll fonts/
total 41328
-rw-rw-rw- 1 cnsgyg staff 7.7K 11 21 01:08 STKaiti.eot
-rw-rw-rw- 1 cnsgyg staff 8.2K 11 21 01:08 STKaiti.svg
-rw-rw-rw- 1 cnsgyg staff 7.6K 11 21 01:08 STKaiti.ttf
-rw-rw-rw- 1 cnsgyg staff 7.7K 11 21 01:08 STKaiti.woff
-rw-rw-rw- 1 cnsgyg staff 3.9K 11 21 01:08 STKaiti.woff2
压缩之前的字体文件会被移到 fonts
目录下的 .font-spider
目录:
$ ll fonts/.font-spider
total 24880
-rw-rw-rw- 1 cnsgyg staff 12M 11 21 01:08 STKaiti.ttf
书写 CSS
现在字体压缩完了,怎么应用到自己的网站中呢?也很简单,先写个 CSS 通过 @font-faxe
引入压缩后的字体,格式与第一步中的 index.html 类似:
/* fonts-zh.css */
@font-face {
font-family: 'font';
src: url('../fonts/.eot');
src: url('../fonts/.eot?#font-spider') format('embedded-opentype'),
url('../fonts/.woff2') format('woff2'),
url('../fonts/.woff') format('woff'),
url('../fonts/.ttf') format('truetype'),
url('../fonts/.svg') format('svg');
font-weight: normal;
font-style: normal;
}
这样还不行,你还需要将压缩后的字体文件拷贝你的网站中,CSS 中通过相对路径要能找到这些字体文件。可我不想这么做,太麻烦了,我还想更简单点。
base64 编码
灵机一动,想到了 base64,编码之后可以不用拷贝这些字体文件,还能减少网站字体的加载体积,真是一箭双雕啊!具体的步骤我就不解释了,直接把所有步骤放到脚本中:
#!/bin/bash
font=STKaiti
eot=$(cat fonts/$font.eot|base64|tr -d '\n')
woff=$(cat fonts/$font.woff|base64|tr -d '\n')
woff2=$(cat fonts/$font.woff2|base64|tr -d '\n')
ttf=$(cat fonts/$font.ttf|base64|tr -d '\n')
svg=$(cat fonts/$font.svg|base64|tr -d '\n')
cat > fonts-zh.css <
执行完上面的脚本后,就生成了一个 fonts-zh.css
,这是我们唯一需要的东西,不再需要任何额外的文件。
引入 CSS
最后一步就是在你的网站中引入该 CSS,具体的做法大同小异,以 hugo 为例,先将 fonts-zh.css
复制到网站主题目录的 static/css/
目录下,然后在 中引入该 css,以 beatifulhugo 主题为例,直接在
layouts/partials/head_custom.html
中加上下面一行:
最后让网站的 body 使用该中文字体,具体的做法是修改 body 的 css,以 hugo 的 beatifulhugo 主题为例,修改 static/css/main.css
中的 body 属性:
body {
font-family: STKaiti;
...
}
可以再加上备用字体,例如:
body {
font-family: STKaiti,Cambria;
...
}
表示如果 STKaiti
字体不可用,将使用 Cambria
字体。到这里就大功告成了,具体的效果可以参考我的网站:https://fuckcloudnative.io/。
5. 总结
如果你没有强迫症,到这一步就大功告成了,可我还觉得不够简单,那么多步骤实在是太繁琐了,我要让它们全部自动化,把所有的步骤放到一个自动化脚本中。这还不够,为了造福大众,我在 GitHUb 中新建了一个仓库,所有的脚本和步骤都在上面,有需求的小伙伴可以拿去 happy 啦~~
项目地址:https://github.com/yangchuansheng/font-spider-plus
6. 参考资料
微信公众号
扫一扫下面的二维码关注微信公众号,在公众号中回复◉加群◉即可加入我们的云原生交流群,和孙宏亮、张馆长、阳明等大佬一起探讨云原生技术