html优化字体包,web性能优化之字体优化

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

一、在线工具压缩

1.1、中文字体在线压缩

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

1.2、使用云字体

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

二、本地自动化工具优化

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

format,png

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 {

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文件夹中,当然也可以自己备份一下~

format,png

三、自定义字符集

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

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

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

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

format,png

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

附上字体格式在线转换

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值