网站优化之字体

Posted 最爱小虾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网站优化之字体相关的知识,希望对你有一定的参考价值。

首先,处理字体,在网页:https://www.fontsquirrel.com

目前,@ 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‘;}

拓展:

-使用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

以上是关于网站优化之字体的主要内容,如果未能解决你的问题,请参考以下文章

网站设计之Flash简单动画入门介绍字体闪烁及渐显

Elasticsearch笔记九之优化

Unity性能优化之字体篇

前端代码优化方法

网站优化之路---图片优化,图片从模糊到清晰

第2262期Web 性能优化:使用 CSS font-display 控制字体加载和替换