使用 font-spider 库来作压缩处理。
使用 tesla font 作为示例字体。
链接： tesla font
npm install font-spider-
添加 css 文件
@font-face { font-family: 'source'; src: url('../font/source.eot'); src: url('../font/source.eot?#font-spider') format('embedded-opentype'), url('../font/source.woff2') format('woff2'), url('../font/source.woff') format('woff'), url('../font/source.ttf') format('truetype'), url('../font/source.svg') format('svg'); font-weight: normal; font-style: normal; }
- 将 font-family 名字改成自己想使用的名字
- 将该段 css 代码中所有
../font/source.*文件替换为tesla font的ttf文件所在路径，后缀名不需要改变。
必须保证
ttf文件存在，font-spider会自动生成相应的其他文件。 -
在
html文件中引入该css文件，并为需要引用该字体的元素添加font-family的样式<!-- index.html 作为示例 --> <head> <link rel="stylesheet" href="./css/tesla-font.css" /> <style> .container { font-family: 'tesla font'; } </style> </head> <body> <div class="container"></div> </body>
-
运行命令压缩字体
# npx font-spider [options] <htmlfile ...> npx font-spider index.html
更多使用方法和限制参考 font-spider 文档。