全部文章 web开发 Api文档 时光画轴 全部壁纸 二次元 初音未来 自然 时光 游戏 崩坏学园 英雄联盟 碧蓝航线 全部番剧 电影 国创 番剧 全部视频 动画 影视 音乐
logo
web性能优化之字体优化

web性能优化之字体优化

Timeless 2018-04-10 53

在网站中我们常常需要为了几个字体的效果,而引对应的字体文件(几M到十几M.中文字体都很大!!!)。这样在加载这个页面的时候,对于用户的流量消耗比较大。所以我们需要对字体文件进行优化~

一、在线工具压缩

1.1中文字体在线压缩

http://everyfont.enjoyfe.com/

需要将Html+Css+Font项目打包成压缩包,上传到上面的网站,然后下载优化过的字体

1.2使用云字体

有字库 https://www.youziku.com/

或者使用CDN对字体文件进行加速

二、本地自动化工具优化

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

002VPCWbzy70VQ8QQDef0.jpg

font-spirder 官网:http://font-spider.org/

2.1、font-spirder安装

先安装好 NodeJS,然后在命令提示符执行下面语句进行全局安装

npm install font-spider -g

依赖python的哦,所以安装python2.7 并设置系统的环境变量

2.2、自定义web字体的声明

注意路径的书写,网页显示正常的情况下在进行优化

/*声明 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';
}
/*
1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont 
3. 注意字体文件的格式,需要是eot、woff、ttf或者svg
*/

2.3、font-spirder使用

在你项目的根目录运行命令提示符

font-spider ./*.html

*表示所有的html,也可以html文件名来指定优化那个html引用的字体文件

font-spider或备份原来的字体到.font-spider文件夹中,当然也可以自己备份一下~

QQ截图20180510104418.jpg

三、自定义字符集

1) IconMoon ( https://icomoon.io/app/#/select/font )

IconMoon是一个优秀的免费创建自定网页图标字体的工具。提供一个在线的字体制作APP,也提供离线版的Chrome插件, 同时还提供免费开源的图标供大家选用。支持上传SVG格式的图标或者单个字符。

2)EverythingFonts ( https://everythingfonts.com/ttf-to-svg )

EverythingFonts提供了丰富的字体转换工具,可以把ttf,otf,wotf等字体转换为SVG格式。

Fontfacegen(http://fontfacegen.com/ttf-to-svg-converter)也提供了类似的转换功能。

使用上面两个工具我们就能够把自己喜欢的开源字符“搬”到我们的自定义字体中去。

3)FontCreator是世界上最流行的字体编辑器之一。 先进的功能集使其成为专业人士的首选工具,其直观界面足以满足任何专业级别的用户的需求。

https://download.pchome.net/system/font/detail-3628.html

oy7frv-1sla.jpg@0e_0o_600w_450h_90q.jpg

下载安装后,导入你要用的字体然后编辑,保留需要用到的字符

附上字体格式在线转换

字体格式转换器  - 字客网

在线转换器


分享到微信