网站优化之字体
首先,处理字体,在网页:https://www.fontsquirrel.com/tools/webfont-generator
目前,@ font-face的支持
- Firefox
- Opera
- Chrome
- Safari
- Internet Explorer 9
在旧的浏览器使用@ font-face时,不同的浏览器支持特定的字体文件。
- IE浏览器:EOT
- Mozilla浏览器:OTF,TTF
- Safari浏览器:OTF,TTF,SVG
- 歌剧:OTF,TTF,SVG
- Chrome浏览器:TTF,SVG
将其分别转成.eot .woff .ttf .svg ,然后利用@font-face
@font-face {
font-family:'fangZheng';
src:url('../fontface/fangZheng/_gbk_m-webfont.eot');
src:url('../fontface/fangZheng/_gbk_m-webfont.eot') format('embedded-opentype'), /* IE6-IE8 */url('//at.alicdn.com/t/font_1474877045_270467.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fontface/fangZheng/_gbk_m-webfont.woff') format('woff') /* chrome、firefox */,url('../fontface/fangZheng/_gbk_m-webfont.svg') format('svg');
}
//使用的时候
.banner-text>p{font-family:'fangZheng';}
3,在页面中载入Web font系列的字体子集
下载:https://github.com/ecomfe/fontmin-app/releases
注意:字体支持:新蒂字体,浙江民间书刻体,思源字体,台湾教育部標準宋體
所以不是太普遍的适用。
4,中文字体的自动化构建;
基于 edp 和 fontmin,按需提取字型,多格式转换,自动化构建字体。
参考配置:http://efe.baidu.com/blog/chinese-font-build/
$ npm install -g edp
然后:
$ git clone https://github.com/junmer/edp-build-fontmin-demo // 下载 示例项目 $ cd edp-build-fontmin-demo // 进入 示例项目 路径 $ npm install edp-build-fontmin // 安装 edp-build-fontmin 依赖 $ edp build -f
5,gulp构建
参考配置:https://github.com/ecomfe/gulp-fontmin
$ npm install --save-dev gulp-fontmin
6.font-spider
Install
npm install font-spider -g
应用css:
@font-face { font-family: 'source'; src: url('../font/source.eot'); src: url('../font/source.eot?#font-spider') format('embedded-opentype'), url('../font/source.woff2') format('woff2'), url('../font/source.woff') format('woff'), url('../font/source.ttf') format('truetype'), url('../font/source.svg') format('svg'); font-weight: normal; font-style: normal; } .home h1, .demo > .test { font-family: 'source'; }
下载:
https://github.com/aui/font-spider
拓展:
-使用Font Family Reunion这样的服务,选择一个可备用的字体,以免字体未加载完或加载失败,而出现的空白。
-Font Face Observer, 压缩后大小4KB,这块也不熟https://github.com/bramstein/fontfaceobserver
-字体加载器——Font Loading polyfill,这块还不熟。https://github.com/bramstein/fontloader
参考:http://www.w3cplus.com/css3/the-font-face-dilemma.html
只有在泥泞的道路上才能留下脚印