html 中加载字体太慢,前端解决中文字体加载慢的问题
CSS3中,使用@font-face即可加载自定义字体了。
推荐的跨浏览器 @font-face CSS 写法:
/*声明 WebFont*/
@font-face {
font-family: 'fontName'; /*字体名称*/
src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/font.woff') format('woff'),
url('../fonts/font.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../fonts/font.svg') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.test {
font-family: 'fontName';
}
正常使用@font-face加载自定义字体时,可能整个字体包大小有好几M,打开网页时,可能会需要很长的时间来下载字体。用户体验很不好。
那么如何解决这一问题呢?
你可以找设计小姐姐/小哥哥帮忙把字体包中用不到的字拿掉,只留页面需要的字,这样字体文件大小就会小很多(但是这种方法适应性太差,如果发生文字更换,字体文件也会频繁需要修改。)
其实我们前端也有神器可以解决此问题,
font-spider的工作原理是这样的: 中文字体文件之所以很大,是因为英语只有26个字母,而中文的汉字有好多好多个,所以文件相对来说就会大很多。font-spider就是从你的css文件的@font-face入手,去查找字体,然后遍历你的html文件,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
如何使用font-spider
1.首先你的电脑需要安装node.js
2.安装好了node.js,然后执行:
npm install font-spider -g
3.在css中使用webfont,在css中就按照以下格式声明@font-face(注意 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成)
/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'pinghei';
}
4.运行 font-spider 命令
cd /Users/xxx/Desktop/MyRepository/project /*进入项目内*/
/*执行命令,*.html是对所有html文件执行该命令,你也可以写具体name的html*/
font-spider *.html
命令执行完后,字体文件下多出来以下文件(.font-spider文件夹下是原始的ttf文件)
image.png
注意:
字蛛不支持动态生成的文字,他只能找到html中存在的文字。
除了兼容font-spider(字蛛)支持的特性:
压缩字体:智能删除没有被使用的字形数据,大幅度减少字体体积
生成字体:支持 woff2、woff、eot、svg 字体格式生成
font-spider-plus(字蛛+)还具有以下特性:
支持线上动态渲染的页面
支持线上GBK编码的文件
html 中加载字体太慢,前端解决中文字体加载慢的问题相关推荐
- win10系统中photoshop cs6中界面字体太小的解决方法
win10系统中photoshop cs6中界面字体太小的解决方法 参考文章: (1)win10系统中photoshop cs6中界面字体太小的解决方法 (2)https://www.cnblogs. ...
- 修改Typora默认的字体为好看秀美的中文字体“华康手札体“并配置一些高级定制功能(20210404已成功测试)
本次测试环境 winodws10操作系统 typora软件:0.0.98(相近版本一般都可以进行验证操作) 1.请客官先体验下最终效果图 大家可先瞅一瞅最终修改后的效果图如何,再根据自己需求是否决定要 ...
- linux安装中文字体 yum,给CentOS安装中文字体(转)
1.安装fontconfig yum -y install fontconfig 这个命令执行完成之后,就可以在/usr/share文件夹里面看到fonts和fontconfig 使用上面这个命令,安 ...
- [转]QT中QString与string的转化,解决中文乱码问题
[转]QT中QString与string的转化,解决中文乱码问题 参考文章: (1)[转]QT中QString与string的转化,解决中文乱码问题 (2)https://www.cnblogs.co ...
- 修改Typora默认的字体为好看秀美的中文字体“华康手札体“
一 下载并安装"华康手札体W5P"字体 (1)下载方式: 1. 方式一 http://www.downcc.com/font/341067.html 2.百度云链接: 链接:htt ...
- LibreOffice完美解决中文字体问题(在黑暗中摸索了好久~)
LibreOffice完美解决中文字体问题(在黑暗中摸索了好久~) 参考文章: (1)LibreOffice完美解决中文字体问题(在黑暗中摸索了好久~) (2)https://www.cnblogs. ...
- Html 中表格导出生成excel文件,解决中文导出失败问题。
Html 中表格导出生成excel文件,解决中文导出失败问题. 网上有Github的jquery插件,但是表格中含有中文的时候,会导出失败,jquery.base64出现INVALID_CHARACT ...
- html 中加载字体太慢,浅谈CSS字体的加载加速问题
除了各种特定字体系列外(如 Times.Verdana.Helvetica 或 Arial),CSS定义了 5 种通用字体系列: Serif 字体 这些字体成比例,而且有上下短线.如果字体中的所 ...
- 如何解决中文字体加载缓慢的问题?
问题: html页面外部倒入中文字体文件,字体文件太大导致网站上线后,页面的字加载缓慢出现一系列bug 解决方法: 网上在线云字体 [有字库],直接在线引用,不用下载 https://www.webf ...
最新文章
- html 链接 pdf,简单的HTML DOM只解析名称和含有PDF链接链接
- java基于udp实现键盘录入聊天
- tcpwrapper的使用方法
- 全渠道的核心是渠道协同和数据整合
- 概率论公式,你值得拥有
- 用这10个小技巧加速Python编程
- xss challenge 解题思路(8-18)
- mysql 二进制日志删除_MYSQL 删除二进制日志的 3 个方法
- 税控数据接口之XML接口导入
- AutoCAD实用功能之查看xdata扩展属性
- stm32f107rc使用系统时钟延时不准
- http 阮一峰_WebSocket 教程 | 阮一峰
- [每日100问][2011-10-06]iphone开发笔记,今天你肿了么
- cesium添加填充_项目中的一个关于cesium的边界线的问题
- matlab关系矩阵布尔运算,[SketchUp]:布尔运算的运用,涨知识了
- Corg.quartz.JobPersistenceException: Couldn‘t retrieve trigger
- JAVA集合和字符串互转
- 剪不断,理不乱——Javascript,JQuery,AJAX
- 车床零件加工调度问题
- 华为鸿蒙战略发布会内容,万物互联!华为鸿蒙发布会带来无限可能