html字体文件过大导致加载缓慢如何解决？

在网页设计中，美工通常要求前端使用自己的定义的字体，比如苹果的字体PingFangMedium.ttf，而实际上除了英文和数字好看外，中文并不好看，特别是windows下，中文发虚。但是字体文件却特别大，因此考虑通过压缩字体，将汉字这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式，从而在不影响网页效果的前提下，加快网页响应速度。

压缩前字体文件PingFangMedium.ttf高达10.5M

字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，其中font-spidder.html就包含了使用的字体文件，这样就可以使得字体文件更小。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: op-design;src: url('PingFangMedium.ttf') format('truetype');}.text {font-family: op-design;font-size: 40rpx;}</style>
</head>
<body><div class="text"><span>0123456789.+/</span><span>abcdefghijklmnopqrstuvwxy</span><span>ABCDEFGHIJKLMNOPQRSTUVWXY</span></div></body>
</html>

使用方法如下：

1.先安装运行Node.JS

2.安装字蛛插件font-spider，命令为：

cnpm install font-spider -g

3.创建一个包括有特殊字体文件的HTML页面，文字格式为：ttf

4.字体压缩

压缩test.html中的字体

也可以使用 font-spider ./*.html，意思是压缩当前文件夹下所有html所引用的字体

5.查看压缩结果

由图可见已经把原来15M多的字体压缩为6.8K大小的字体文件了。并且在原始目录生成了.font-spider目录，目录里面保存了，未压缩字体文件。

字蛛官网地址：http://font-spider.org/#use

html字体文件过大导致加载缓慢如何解决？相关推荐

【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
使用自定义字体包太大导致加载太慢解决办法用font-spider字蛛解决自定义字体包太大的问题
第一步:创建文件夹 1.创建一个文件夹 2.创建一个index.html 3.创建font文件夹 4.在font文件夹中放入字体文件示例图: 第二步:index.html <!doctype ...
Google字体库引起的首页加载缓慢的解决方法
今天看到博友-小思设计(http://52think.me/)的一条评论,说是我的博客看不到文字,当时还纳闷,我天天访问也没发现这个问题啊(公司电脑配了google服务的host,访问都正常): 下午 ...
对android小程序的结论,微信小程序引入外部字体总结（针对安卓加载缓慢问题）...
最近有个项目需求,需要改变小程序所有文字的字体. 查了资料后发现,本地加载字体文件导致小程序太大.动态加载文件,苹果真机完美,但是在安卓的真机上引入的外部字体加载会很慢,会有很明显的默认字体切换到外部 ...
css3如何链如外部字体,微信小程序引入外部字体总结（针对安卓加载缓慢问题）...
最近有个项目需求,须要改变小程序全部文字的字体. 查了资料后发现,本地加载字体文件致使小程序太大.动态加载文件,苹果然机完美,可是在安卓的真机上引入的外部字体加载会很慢,会有很明显的默认字体切换到外部 ...
解决父类加载iframe，src参数过大导致加载失败
原文:解决父类加载iframe,src参数过大导致加载失败 <iframe src="*******.do?param=****" id="leftFrame&qu ...
电脑卡顿，软件运行加载缓慢的解决方法
日常办公时电脑卡顿,软件运行加载缓慢的解决方法. 双击桌面的此电脑图标,或者使用win键+E键的快捷方式. 2.进入计算机C盘中的Temp文件夹内. 路径:C:\Users\Administrator ...
使用cdn来加速字体文件在前端的加载速度，并监听字体是否加载完成
最近在个人网站butterpig中实现了个性印章的在线设计功能,里面目前一共实现了有八九种个性印章的样式,并且还有六七种网络开源商用的字体类型.具体效果可以访问:个性印章在线设计查看. 印章的设计,其 ...
苹果CMS图片加载缓慢怎么解决？
像上图这种的,图片加载慢,因为图片是放在别人的网站上,你采集到的只是一个图片的地址而已,所以,你只要把图片采集到自己服务器上,那么加载就会和网站同步了.如下图,找到"视频-视频数据-同步图片 ...

html字体文件过大导致加载缓慢如何解决？

html字体文件过大导致加载缓慢如何解决？相关推荐

最新文章

热门文章