font-spider 压缩字体文件 html vue

font文件一般都很大，占用内存，向大家推荐一个压缩插件font-spider，这个插件是基于node环境的,主要是通过一个引入字体的html文件来生成一个新的压缩后的字体，建议创建一个html文件来压缩，如果要在vue项目里，可以h借助项目中的index.html文件。
源文件7M，压缩完36K。步骤如下：

1. 安装nodejs
这个步骤就不详细赘述了，可以用node -v来检测是否安装环境。

2. 安装font-spider

npm install font-spider -g

3. 创建html文件，引入font
我创建的目录如下：

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>demo</title><link rel="stylesheet" href="./index.css">
</head>
<body><p>我是一段普通的文字，我是一段普通的文字，我是一段普通的文字，我是一段普通的文字，我是一段普通的文字。</p><p class="main2">我是一段带有字体的文字，我是一段带有字体的文字，我是一段带有字体的文字，我是一段带有字体的文字。</p>
</body>
</html>

index.css

@font-face {font-family: 'HarmonyOS_Sans_SC_Medium';src:url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.ttf') format('truetype')/*url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.eot?#font-spider') format('embedded-opentype'),url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff'),url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Mediume.svg') format('svg');*/
}p {margin: 20px;
}p:nth-child(2) {font-family: 'HarmonyOS_Sans_SC_Medium';
}

4. 执行压缩命令
font-spider html地址（html地址可以直接右键html文件查看属性里的位置）

font-spider E:\project\demo\index.html

压缩成功后会有如下提示：

同时文件目录中新生成了一个字体文件，如下：

这个文件就是压缩后的字体，直接拷贝使用即可。

font-spider 压缩字体文件 html vue相关推荐

.ttf字体文件引入vue项目及使用
出自文章:.ttf字体文件引入vue项目及使用 UED要求使用非系统自带字体 1.在项目的assets文件夹中创建fonts文件夹,将下载好的.ttf字体文件放进去,并创建font.css文件 2.在 ...
bmp font 如何创建字体文件（图片字）
在游戏制作的过程中,总会有特殊的需求,比如一个暴击或者获得奖励提示什么的,是需要一个好看的图片来展示的,但是如果有些字是通用的,比如数字,不能每一个数儿都让美术出一个图,只需要0-9,这10张图片就可 ...
字体文件压缩 - font-spider (字蛛)
优化加载速度, 压缩字体文件安装: npm install font-spider -g 查看版本: font-spider -v 1. 新建一个fonts文件 2. fonts下新建index. ...
Vue中引入字体并解决字体文件过大问题
利用 CSS3 @font-face 规则指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL: @font-face {font-family: myFir ...
网页字体文件安装及使用
文章目录前言一.有哪些字体文件可以使用? 二.在网页中如何使用? 三.怎么压缩字体文件? 总结前言如何使用网页设计指定的字体,要知道在windows系统里是没有苹方字体的,用户没有安装怎么办, ...
[css] 你是如何压缩字体的？
[css] 你是如何压缩字体的? 压缩字体文件么,有研究过,平时用 font-spider. webpack 集成没怎么实践过,还只知道 url-loader.有三种不同的压缩处理策略的,自己决定压缩 ...
html字体文件过大导致加载缓慢如何解决？
在网页设计中,美工通常要求前端使用自己的定义的字体,比如苹果的字体PingFangMedium.ttf, 而实际上除了英文和数字好看外,中文并不好看,特别是windows下,中文发虚.但是字体文件却特 ...
android 字体文件压缩,Android创建assets文件夹并使用字体图标（Icon Font）
首先我们要知道如何在AS中新建引用assets文件 1.将项目切换到Project模式 Project.png 2.要注意assets文件夹要跟Java文件在同一目录下,都包含在main的文件下面. ...
vue+python把woff字体文件中的字体全部读取出来
获取woff字体文件的字符编码 from fontTools.ttLib import TTFontfont = TTFont("7ef51293.woff") extraName ...

font-spider 压缩字体文件 html vue

font-spider 压缩字体文件 html vue相关推荐

最新文章

热门文章