有字库精美中文字体

到 B 站观看视频

我们共同的愿望是在网页中使用精美的中文字体,但是同时又不想加载庞大的字体库。有字库这个网站给我们提供了完美的解决方案,我们可以在它的网站上输入想要的文字,在下载得到的字体包里,就会只包含这些文字的字体,所以字库文件不会太大。本文演示一下,具体的操作步骤,并且对比一下相关的字库和工具。

有字库功能简介

目前有字库上共有1383种字库,全部可以免费使用,如果需要定制自己的字库,可以购买他的付费服务。

页面应用

有字库提供的云端字体服务需要用户注册之后才能使用,非注册用户可以把字体库下载到本地使用,那接下来先演示一下如何下载字体库

下载字体库

操作过程很简单,到在线字库页面挑选自己喜欢的字体,以“钟齐蔡云汉毛笔行书”为例,点击“立即使用”按钮,进入一个新的页面,在文本框中输入即将用到的汉字,如“好多视频网”,然后点击“生成”按钮,稍等片刻就会看到这几个字的效果预览,点击“下载Demo”按钮,把字库文件下载到本地,文件名是 demo.zip。

接下来解压 demo.zip。因为 demo.zip 是一个 7-zip 归档文件, 要安装 p7zip 解压缩工具

brew install p7zip

p7zip 安装成功之后,在命令行中输入以下命令,把 demo.zip 文件解压到 font 目录中。

7z e -ofont demo.zip

看一下 font 目录中包含的文件,不仅包含所需要的字体格式文件,还有参考样例,根据样例把字体库用到自己的网页中。并且下载到的字体文件每个还都不到10K大小。

使用有字库云端字体服务

首先注册一个有字库的账号,账号注册成功之后,来到“在线字库”页面选择字体。有字库为用户提供了三种调用方法,分别是 CSS模式、卢教模式、接口定制。

调用“CSS模式”演示一下,在文本框中输入“好多视频网”,点击“生成”按钮,打开的新页面列出了如何把字体应用到网页中操作步骤。我在 codepen 上面做了一个 demo

See the Pen youziku by Peter Wang (@happypeter) on CodePen.

如果文字内容会不断变化,可以使用“卢教模式”,具体过程视频中有演示,视频中使用到的 server 命令如下

server='open http://localhost:8000 && python -m SimpleHTTPServer'

其它方案

另外,有一款中文 WebFont 自动化压缩工具,叫做字蛛。它会自动检测网页中包含的中文字符,按需压缩字体库,从而减小字体库的大小。毕竟是命令行工具,所以如果网页上的字体会频繁修改,这种方式要比使用有字库的网页界面更方便。

Google 的字体优化方案 也非常值得一读。

总结

有了字体服务,我们不仅可以通过运用各种可爱字体让页面看上去不那么死板,也可以像苹果官网 页面上达成现代感专业感更强一些的效果。