有时候想给特定地方的文字使用不同的字体,但正常的字体文件一般都不会太小,加载一个完整的字体文件就没有那么必要,这个时候我们就可以用到字体子集化技术。
什么是字体子集化?
字体子集化是指从完整字体文件中提取特定字符,生成精简后新字体文件的技术。当网站只需使用字体中的少量字符时(如标题文字),这项技术能显著减小字体文件体积,提升页面加载速度。
目前本站标题 威言威语 就使用了字体子集化的操作。当然我又进了一步,重新编辑了字体,其中威字也改用了icon 的设计,这3个字子集化之后大小不超过2k,还是非常值得操作的。
优先建议字体文件使用woff2格式,得到字体之后,在css中自定义字体名称,然后在需要的地方就可以使用这个自定义字体了。
@font-face {
font-family: 'weisay'; /* 自定义字体名称 */
src:url('../weisay.woff2') format('woff2'); /* 字体文件路径 */
}
现在可以子集化的工具很多,一些网站也能轻松实现。
基础使用:字体子集化
Transfonter
官网:Transfonter
虽然界面是英文,但是使用很简单,上传你想要使用的字体,小于15M即可。然后在 Characters 一栏中填写需要的文字,再点击上面的 convert 按钮,等待几秒就生成好字体了。下载的附件还提供了demo,你可以自己修改测试看看你选择的那几个字生效了没有。
效果展示:威言威语
字体使用:锐字潮牌真言简。
Fontmin
官网:Fontmin
将字体拖入,输入要使用文字,点击生成就OK了,不过看着默认生成出来的有woff,没有woff2,可以找个转换网站转换一下,推荐还是使用woff2格式。
FontSmaller
官网:FontSmaller
和Fontmin类似,打开软件选择字体,然后输入要使用文字。不过它只支持ttf格式字体,并且也只导出ttf字体,想要woff2的还要再转化一下,有一点点麻烦。
进阶应用:多个字体合并
假如你不走寻常路,一个标题里面想使用两种字体,同时又希望只用一个字体文件,那么也是可以的。当然有个前提,他们是不同的字,像我博客名字:威言威语,你想在一个字体文件里用两个不同字体的“威”就不行。
Aspose.Font
官网:Aspose.Font
它的功能挺多,字体转换、字体子集化、字体Base64编码,还有字体合并,我们这里合并多个字体就需要用到它了,我们可以选择 多个woff2转woff2。
点击“Browse for file(s)” 一次要选择2个字体,然后在各自的 symbols 里输入需要用的子集,点击 merge 合并,等待一会儿就合并好,然后有个倒计时,30s之后就能下载了。
这样,我们就将2个字体合并成一个了。
效果展示:威言威语
字体使用:“威”使用了金山云技术体、“言语”使用了锐字潮牌真言简。
高级应用:字体编辑
如果你对现有字体不满意,想要打造专属自己的字体风格,那么可以使用FontForge设计个性化字体。
通过合理使用这些工具和技术,可以显著优化网站字体性能,同时实现独特的设计效果。
小威,可以考虑整套自己的专用字体。。。
@Lvtu就我这半吊子水平,折腾出几个字已经是极限了。
有点帅啊,看起来精致很多,有时间也玩一下。
@紫慕局部使用一下还是可以,点缀一下。