Web Font使用简易教程

通过对Web Font技术的利用,可以为网页设计者在不用过多考虑访客终端平台(无论是电脑还是移动设备)预装字体的情况下(低版本浏览器除外),选择更多第三方字体提供了可能性和便捷性。

(本文仅适用西文字体)

1、将字体转换为Web Font格式

上传字体文件到FontSquirrel,默认可以选择「OPTIMAL」模式。

如果需要精简字体文件体积,且对将要使用的字符有所预期,可以选择「EXPERT…」模式,并做进一步设定:

①「Font Formats」栏选择「WOFF」格式。

②「Subsetting」栏选择「Custom Subsetting…」,在下方选项中对希望使用到的字符集进行勾选,或者直接在「Single Characters」中输入需要的字符。「Subset Preview」栏中可以预览最终生成时引用到的字符子集。

③「CSS」栏勾选「Style Link」。

④「Agreement」栏勾选「Yes, the fonts I’m uploading are legally eligible for web embedding」,点击「DOWNLOAD YOUR KIT」按钮下载。

2、在CSS文件中使用Web Font

① 在相关Wordpress主题目录下新建一个「myfonts.css」文件;把之前下载到的ZIP包解压,拷贝其中「stylesheet.css」文本内「@font-face……」字段代码到「myfonts.css」(如有多个字体则重复操作)。

② 将上述压缩包内的WOFF字体文件统一上传到与「myfonts.css」相同目录下。

③ 编辑现有主题CSS文件(一般为「style.css」):首先加入以下代码「@import url(myfonts.css);」。其次对需要使用到Web Font字体部分的font-family属性进行修改,把Web Font字体名称添加到该栏第一顺位。

完成以上部分,刷新浏览器缓存就能看到新的字体被应用在网页上了。


备注一:为了减少HTTP请求数,也可将WOFF转换成base64编码嵌在CSS文件内。只要在操作第一部分「字体转换格式」中的第三条时,多勾选一个「Base64 Encode」选项;同时免去第二部分「CSS文件修改」的第二条拷贝字体文件步骤即可。

备注二:某些小图片也可以base64编码的形式嵌入CSS或HTML网页代码中,用文件体积的增多换取HTTP请求数的减少,「咖啡与茶」如何选择平衡视具体情况而定。

备注三:中文字体因为普遍文件体积较大,不适合像西文字符一样直接提前统一预载使用,否则首次加载网页会异常缓慢。但可以利用第三方服务针对每一页的文字内容,单独在线生成字体子集使用。


附相关资源:

  1. base64在线转换工具(限图片格式)
  2. Google字体公共库
  3. Font Awesome图标字体
  4. Mac OS和Windows OS默认预装字体兼容性列表
  5. 中文字体资源「有字库

Typewritings @ Monday, January 25th, 2016