为什么字体使用font-spider后就无法生效

发布网友发布时间：2022-05-14 15:03

我来回答

共2个回答

懂视网时间：2022-05-14 19:24

本篇文章给大家带来的内容是关于node字体压缩插件font-spider的用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

需求：

根据甲方要求，使用UI中指定字体
移动端默认显示系统默认字体，非系统默认字体需要自行引入字体包
字体包过大，字体包通常在几MB，严重拖累页面加载速度

分析：

文本内容为固定内容，不需要更新
文本内容大多为常用文字，大多文字用不上

插件：

font-spider
node 安装插件方法：npm install font-spider -g

操作：

安装插件
提取项目文字：
创建一个临时html，将所有项目需要用到的文本放到html中
在htmnl中写入样式代码，举个栗子：

 @font-face {
 font-family: 'myfont';
 src: url('./common/assets/font/myfont.ttf');
 }
 * {
 font-family: 'myfont';
 }

在命令提示窗口中，将目录展开到html所在的目录，输入指令：font-spider *.html 即可将该目录下所有html的字体抽离打包。

注意：

如果页面文本内容需要经常更新
如果需要对input表单内容同样应用定制字体请放弃本文章所述方法，可以考虑通过服务端渲染，动态生成字体包，或者，老老实实将完整的字体包引入页面

热心网友时间：2022-05-14 16:32

方法/步骤

5/5分步阅读
1/5
第一步：
安装node.js，去nodeJS的官网下载，你是多少位的电脑就下多少位的，下好后安装好，这里就不讲怎么安装了，反正就下一步呗。
2/5
第二步：
在开始菜单中找到node.js文件夹，然后点开有点像这个运行程序的图标，我试过了，在电脑自带的cmd运行程序上使用是无效的，必须使用他这个，所以他让安装还是有一定道理的。
3/5
第三步：
在这个打开的node.js这个运行窗口中，将npm install font-spider -g

复制进去，然后enter键，等一会，他程序运行有点慢，很快他便会出现一大堆看不懂的东西。

第四步：
不要管一大堆的看不懂的。打开你做好的html文件夹，字体记得建一个font文件夹放进去，和images、CSS文件夹并排，字体名称一定要换成字母的，你可以是中文缩写什么的。
4/5
第五步：
新建一个CSS样式表，定义字体，把下面的复制进去，输入你刚刚在font里命名的字体名称，这样字体的各种格式都定义好了。

@font-face {

font-family: '字体名称';

src: url('../font/字体名称.eot');

src:

url('../font/字体名称.woff') format('woff'),

url('../font/字体名称.ttf') format('truetype'),

url('../font/字体名称.svg') format('svg');

font-weight: normal;

font-style: normal;

}

字体的格式都定义好了，肯定得引用了。

比如我在html中，有一个h1标签需要用到这个特殊字体，那么就跟普通font-family一样的做法了。

h1 {

font-family: '字体名称';

font-size: 36px;

color: #666;

}
5/5
第六步：
打开刚刚运行了一半的node.js运行窗口，复制font-spider，然后打个空格，再复制你的路径，比如我的路径是D:/字蛛/test/index.html，因为我的html是放在D盘，然后一个测试文件夹中，所以这样写，按下enter键