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

HTML字体CSS3

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生成字体后，再回到你的网页正常引用字体即可。

Comment