在网页中使用特殊中文字体成为可能

Posted 2020-11-05 形成于思

转载 http://www.cnblogs.com/Kummy/p/4442142.html
  以前还不知道这种办法的时候，如果要在网页中显示特殊中文字体的话，需要导入整个全部的.ttf字体文件，而文件高达好几兆，根本是不可取的，偶然间看到以上链接的文章，新的思路新的方法，将网页中需要用特殊字体的中文文字，进行打包压缩。

1.安装font-spider

npm install font-spider -g

2.在css中使用webfont

@font-face{
    font-family: \'pinghei\';
    src: url(\'../font/pinghei.eot\');
    src:
        url(\'../font/pinghei.eot?#font-spider\') format(\'embedded-opentype\'),
        url(\'../font/pinghei.woff\') format(\'woff\'),
        url(\'../font/pinghei.ttf\') format(\'truetype\'),
        url(\'../font/pinghei.svg\') format(\'svg\');
    font-weight: normal;
    font-style: normal;
} 
// 指定字体并使用
.pinghei {
    font-family: \'pinghei\';
}
// ../font 都是相对路径，看文件相对位置
// 其中.ttf文件是必须要有的，根据设计稿的字体在网上下载对应的.ttf文件，其他都是生成的

3.运行font-spider命令

font-spider *.html

4.温馨提示

运行font-spider命令后，会自动生成相关文件，而其中的字体只包括只包括只包括页面中出现并引用字体的文字，如果后面新增了其他文字，需要重新运行命令