font-spider压缩web font字体

1、下载font-spider

基于node环境，必须先安装node。若未安装，自行去node官网下载安装。
npm i font-spider -g

2、项目目录

project
font-gzip.html
font
PingFangSC-Regular.ttf
PingFangSC-Semibold.ttf
PingFangSC-Medium.ttf
DINPro-Medium.ttf
HelveticaNeue.ttf

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>font字体压缩</title><style>@font-face {font-family: PingFangSC-Regular;src: url("./font/PingFangSC-Regular.ttf");}@font-face {font-family: PingFangSC-Semibold;src: url("./font/PingFangSC-Semibold.ttf");}@font-face {font-family: PingFangSC-Medium;src: url("./font/PingFangSC-Medium.ttf");}@font-face {font-family: DINPro-Medium;src: url("./font/DINPro-Medium.ttf");}@font-face {font-family: HelveticaNeue;src: url("./font/HelveticaNeue.ttf?#font-spider");}.p1 {font-family: PingFangSC-Regular;}.p2 {font-family: PingFangSC-Semibold;}.p3 {font-family: PingFangSC-Medium;}.p4 {font-family: DINPro-Medium;}.p5 {font-family: HelveticaNeue;}</style></head><body><p class="p1">hello，world！你好呀</p><p class="p2">hello，world！你好呀</p><p class="p3">hello，world！你好呀</p><p class="p4">hello，world！你好呀</p><p class="p5">hello，world！你好呀</p></body>
</html>

3、压缩web font字体

在font-gzip.html目录下打开cmd窗口。
运行font-spider ./font-gzip.html

打开文件夹目录发现！！！

前后html加载font文件对比

压缩前：

压缩后：

font-spider压缩web font字体相关推荐

【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
网络字体(Web font)文件格式及兼容性说明
目前常用的字体格式目前最主要的几种网络字体(web font)格式包括WOFF,SVG,EOT,OTF/TTF. WOFF WOFF是Web Open Font Format几个词的首字母简写.这种 ...
CSS3与页面布局学习总结（五）——Web Font与Sprite
CSS3与页面布局学习总结(五)--Web Font与Sprite 目录一.web font 1.1.什么是font-face 1.2.font-face优点 1.3.字体格式 1.4.使用@fon ...
Glyph 26426 missing from current font.解决matplotlib画图中文字体乱码问题
1. 问题复现环境:Ipython 3.8 import matplotlib.pyplot as plt import pandas as pddata = pd.read_csv('/Users ...
java.awt.Font.createFont 画图的时候字体不显示问题
由于不想在服务器去安装字体想通过项目里放置字体文件来防止项目上线字体问题导致画出来的图中文乱码,所以决定使用Font.createFont(int fontFormat, InputStream f ...
WEB中文字体应用指南
http://www.fontsquirrel.com/fontface @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现 ...
web默认字体最佳实践
环境: ie6 (window sp3) ie7,8,9 firefox3.6, chrome10,opera 10.62 (window7) 本文先列举出几种常见的字体的显示问题以及优点,然后再列举 ...
html如何太假icon图标,CSS3 icon font完全指南(CSS3 font 会取代icon图标)
为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格 ...
web使用字体包_如何使用跨浏览器Web字体，第2部分
web使用字体包介绍 (Introduction) In part 1 of my article (https://www.sitepoint.com/how-to-use-cross-brows ...
有关Web常用字体的研究？
Windows自带字体: 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋GB2312:FangSongGB2312 楷体GB2312:K ...

font-spider压缩web font字体

1、下载font-spider

2、项目目录

3、压缩web font字体

前后html加载font文件对比

font-spider压缩web font字体相关推荐

最新文章

热门文章