在网站中我们常常需要为了几个字体的效果,而引对应的字体文件(几M到十几M.中文字体都很大!!!)。这样在加载这个页面的时候,对于用户的流量消耗比较大。所以我们需要对字体文件进行优化~
一、在线工具压缩
1.1、中文字体在线压缩
需要将Html+Css+Font项目打包成压缩包,上传到上面的网站,然后下载优化过的字体
1.2、使用云字体
或者使用CDN对字体文件进行加速
二、本地自动化工具优化
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
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文件夹中,当然也可以自己备份一下~
三、自定义字符集
IconMoon是一个优秀的免费创建自定网页图标字体的工具。提供一个在线的字体制作APP,也提供离线版的Chrome插件, 同时还提供免费开源的图标供大家选用。支持上传SVG格式的图标或者单个字符。
EverythingFonts提供了丰富的字体转换工具,可以把ttf,otf,wotf等字体转换为SVG格式。
使用上面两个工具我们就能够把自己喜欢的开源字符“搬”到我们的自定义字体中去。
3)FontCreator是世界上最流行的字体编辑器之一。 先进的功能集使其成为专业人士的首选工具,其直观界面足以满足任何专业级别的用户的需求。
下载安装后,导入你要用的字体然后编辑,保留需要用到的字符
附上字体格式在线转换