title: 关于使用外部字体
tags:

  • 前端
    categories:
  • 前端
    date: 2019-10-24 00:00:00

字体使用

字体压缩

完整的字体库文件对于Web应用来说太过庞大

解决方案一：字蛛
所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用不到这么多，这时候就可以使用字蛛压缩一下，它会识别html中的所有用到该字体的文字，去除没有用到的字体。

使用方法：

  • 安装npm install font-spider -g

  • 把所有可能用到的字体都写到一个html文件index.html中，同时用CSS设置引入并使用外部字体

    1. /*声明 WebFont*/
    2. @font-face {
    3.   font-family: 'pinghei';
    4.   src: url('../font/pinghei.eot');
    5.   src:
    6.     url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    7.     url('../font/pinghei.woff') format('woff'),
    8.     url('../font/pinghei.ttf') format('truetype'),
    9.     url('../font/pinghei.svg') format('svg');
    10.   font-weight: normal;
    11.   font-style: normal;
    12. }
    14. /*使用选择器指定字体*/
    15. .home h1, .demo > .test {
    16.     font-family: 'pinghei';
    17. }

注意：1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成 2. 开发阶段请使用相对路径的 CSS 与 WebFont

  • 执行font-spider ./index.html

可以得到的是一个抽取后的小型的font字体文件，还有一个备份后的原字体文件。

解决方案二：