admin管理员组文章数量:1594976
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 中加载字体太慢,前端解决中文字体加载慢的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728201263a1149407.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论