如何在HTML网页里嵌入中文字体

CSS3通过使用Web Font支持在线字体,通过这项技术我们可以把自定义的特殊字体嵌入到网页中。网站用户不必安装这些字体即可在线使用。

英文在线字体的使用已在国外相当流行,Google等公司都提供了免费或收费的在线字体供使用。当然你也可以通过上传字体文件到你的服务器,然后在CSS中引用就可以使这些字体了。

但中文在线字体的使用在国内比较少见,主要原因是中文字体库过于庞大,少则几兆,大到十几兆。字体文件过大也就限制了中文网站对特殊字体的使用。好在现在终于有款免费的字体压缩工具出现了,它通过分析本地CSS与HTML文件获取WebFont中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。使用方式极为简单,

npm install font-spider -g

Linux系统上可能需要使用sudo执行以上命令。安装成功后,在CSS里声明字体并使用,如下。注意这里的字体名称并不重要,只要一致就可以了。

/*声明 WebFont*/
@font-face {
  font-family: 方正古隶繁体.';
  src: url('../font/方正古隶繁体.eot');
  src:
    url('../font/方正古隶繁体.eot?#font-spider') format('embedded-opentype'),
    url('../font/方正古隶繁体.woff') format('woff'),
    url('../font/方正古隶繁体.ttf') format('truetype'),
    url('../font/方正古隶繁体.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 方正古隶繁体;
}

@font-face中的src定义的.ttf文件即为你的本地字体文件,通常可以从系统字体目录拷贝到HTML字体目录。开发时要使用相对路径。

然后运行font-spider命令,生成字体文件。可以看到生成的字体文件比原字体文件小很多。

font-spider ./demo/*.html

缺点:由于font-spider是通过分析静态页面,并提取实际用到的字体的方式达到减小字体文件的目的,对于动态生成的网页就显示力不从心了。但若网站的文字内容是固定的,比如公司主页等,可以预先把所有会用到的文字输出到一个dummy.html里,用font-spider生成字体后,再回到你的网页正常引用字体即可。

留言