• [放鞭炮][福]玉竹斑斑节日快乐![福][放鞭炮] 2019-05-23
  • 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 山西快乐十分开奖结果:深入理解CSS @font-face性能优化

    山西体彩11选5直选遗漏 www.caxru.com   发布时间:2019-03-06 15:54:26   作者:腾讯IVWEB团队   我要评论

    这篇文章主要介绍了深入理解CSS @font-face性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    本文主要介绍字体加载优化的常用策略,大部分内容为引用和翻译。

    一、 font-face基本用法

    font-face的基本用法想必大家都是知道的,基本上就是类似这样:

    @font-face {
    	font-family: Lato;
    	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
    		 url('font-lato/lato-regular-webfont.woff') format('woff'),
    		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
    }
    p { font-family: Lato, serif; }

    这样就可以使我们的网页用上自定义字体了。 除了font-family 和 src属性之外,还拥有font-style以及font-weight属性。 src可以指定多种字体,会按顺序依次适用,比如上面的示例中会先加载woff2字体,如果失败再加载woff字体,否则加载opentype字体。 src所支持的字体可以有以下类型:

    src参数带不带引号都可以,参数的格式不同含义也不尽相同,比如下面:

    src: url(fonts/simple.woff);       /* 加载simple.woff,地址相对于样式表的地址 */
    src: url(/fonts/simple.woff);      /* 加载simple.woff,地址是网站的绝对地址 */
    src: url(fonts/coll.otc#foo);      /* 从coll.otc字符集中加载foo字体 */
    src: url(fonts/coll.woff2#foo);    /* 从coll.woff2字符集中加载foo字体 */
    src: url(fonts.svg#simple);        /* 加载id 为'simple'的SVG字体 */

    src中加载的字体地址受跨域的约束,如果想跨域加载字体,需要设置CORS。

    这就是font-face的最基础的用法。 接下来我们会进一步分析font-face的用法,并尽可能的找出优化策略。

    二、 什么时候会下载字体?

    上面讲了字体的基本知识,那你有没有想过,字体是在什么时候下载的呢?当我们仅仅在CSS中定义如下样式的时候, 页面加载,字体会自动下载吗?

    @font-face {
    	font-family: Lato;
    	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
    		 url('font-lato/lato-regular-webfont.woff') format('woff'),
    		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
    }

    很遗憾,字体并不会下载。 通常情况 下,只有当我们的页面元素用到了font-face中定义的字体的情况下,才会下载对应的字体。

    注意: 这里我们说了是通常情况,这是因为,IE8在只要是定义了font-face,即使页面元素没有使用对应的字体,也会下载。

    在其它浏览器中也不尽相同,

    比如在 FirefoxIE 9+ 中,遇到如下情况也会下载字体:

    html

    <div id="test"></div>

    css

    #test {
    	font-family: Lato;
    }

    有什么特别之处呢? 你可能注意到了,这个元素虽然使用到了font-family: Lato样式,但是这个元素并没有任何文本?。。?!。 按照我们的理想情况,应该是,只有有文字内容才会去下载字体嘛。 而这就是Chrome, Safari (WebKit/Blink 等)浏览器的行为。

    Chrome, Safari (WebKit/Blink 等)浏览器只有在如下类似情况才会去下载字体:

    html

    <div id="test">这里是有文本的哦</div>

    css

    #test {
    	font-family: Lato;
    }

    所以总结一下,不同浏览器下载字体的策略:

    • IE8 只要定义了font-face,就会去下载字体,不论实际有没有应用该字体。
    • Firefox, IE 9+ 只有定义了font-face 并且页面有元素应用了该字体,就会去下载,不论该元素是否有文本内容。
    • Chrome, Safari 只有定义了font-face 并且页面有元素应用了该字体,并且该元素有文本内容,才会去下载字体。

    那你可能会问了,如果我们的DOM元素是通过动态插入的呢?比如:

    var el = document.createElement('div');
    el.style.fontFamily = 'open_sansregular';
    document.body.appendChild(el);
    el.innerHTML = 'Content.';

    答案是一样的,它的下载策略如下:

    var el = document.createElement('div');
    el.style.fontFamily = 'open_sansregular';
    /* 到这里,IE8就会开始下载字体 */
    
    document.body.appendChild(el);
    /* 只有到这里,Firefox, IE 9+ 才会开始下载字体 */
    
    el.innerHTML = 'Content.';
    /* 只有到这里,Chrome, Safari 才会开始下载字体 */

    三、 FOIT(Flash of Invisible Text)

    FOIT是浏览器在加载字体的时候的默认表现形式,也就是在字体加载过程中,页面是看不到文本内容的。在现代浏览器中,FOIT会导致这种现象出现至多3秒。FOIT会导致很差的用户体验,这是我们需要尽量去避免的。

    四、 FOUT(Flash of Unstyled Text) 与 font-display属性

    FOUT意思是在字体加载过程中使用默认的系统字体,字体加载完后显示加载的字体,如果超过了FOIT(3s)字体还没加载,则继续使用默认的系统字体。

    IE浏览器和Edge不会等待FOIT超时才显示默认字体,会立即显示默认字体。FOUT比FOIT好,但是需要注意它引起的reflow.

    那么要想使浏览器有FOUT行为,我们需要在设置@font-face的时候给它加一个属性:font-display。 font-display默认是auto, 可选属性与含义如下:

    • auto. The font display policy is user-agent-defined.
    • block. Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
    • swap. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.
    • fallback. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases).
    • optional. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a 0s swap period.

    一般设置成fallback和optional即可。

    五、 preload

    在页面加入下面这个代码以便更快的加载字体:

    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

    通常和最基本的字体用法配合使用

    六、 字体转 BASE64URI

    这种方法就是将@font-face中定义字体时的路径直接改为字体的base64编码。

    优点: 这种做法的优点是不会产生FOIT和FOUT。所以也不会有reflow和repaint. 缺点: 字体转成base64也会很大,会影响页面首次加载速度。不支持逗号分隔的形式加载多种格式的字体,只能加载一种格式字体。这导致你为了尽可能保证所有浏览器都可以兼容,通?;嶂付ㄎ獁off格式,因为woff格式兼容性好,但是却没法使用更小体积的woff2格式,因为woff2格式兼容性差点。

    七、异步加载BASE64格式URI字体

    这种方法就是通过异步的方式插入带有BASE64格式URI字体的CSS链接。

    八、使用Font Load API + FOUT + class切换

    这种方式是期初并不使用用到@font-face的class,然后用Font Load API加载我们想用的字体,然后切换相应的CSS即可。Font Load API是原生的API:

    document.fonts.load('1em open_sansregular')
    .then(function() {
    	var docEl = document.documentElement;
    	docEl.className += ' open-sans-loaded';
    });
    
    .open-sans-loaded h1 {
    	font-family: open_sansregular;
    }

    当然这种方法需要考虑浏览器兼容性的问题。

    九、 FOFT(Flash of Faux Text)

    FOFT会把字体的加载分成多个部分,首先加载罗马网络字体,然后会在加载真实的粗体和斜体的时候立即使用font-synthesis属性渲染粗体和斜体的变体。

    这种方法是基于[ 使用Font Load API + FOUT + class切换 ]这种方式的,非常适合加载同一种字体但是不同粗细,字形的场景,比如罗马、粗体、斜体、粗斜体等。我们将这些字体分成2阶段: 第一阶段是罗马字体,然后立即渲染人造粗体和斜体,最后(第二阶段)用真实字体替代。这里面还可以使用sessionStorage优化访问重复视图的场景。

    十、CRITICAL FOFT

    CRITICAL FOFT和标准的FOFI的唯一区别就在于第一阶段罗马字体的加载,CRITICAL FOFT不会加载罗马字体的全集,只会加载它的一个子集(比如A-Za-z0-9),全集会在第二阶段加载。

    十一、CRITICAL FOFT WITH DATA URI

    这个和CRITICAL FOFT的唯一区别就是罗马子集字体的加载方式,前面是用Font Load API完成了,这里会将马子集字体硬编码成BASE64 URI的形式加载。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    • 网站前端性能优化之javascript和css篇

      之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的。关于css的性能优化,他提到了如下几点
      2016-12-14
    • CSS性能优化提高css性能的方法

      这篇文章主要介绍了CSS性能优化提高css性能的方法,不规范的css会导致很多性能问题,所以学习掌握css性能优化技巧是非常必要的,对css性能优化知识感兴趣的朋友一起学习吧
      2016-08-25
    • CSS代码编写的一些性能优化技巧总结

      这篇文章主要介绍了CSS代码编写方面的一些优化技巧总结,谈到了包括避免通用规则和后代选择器等方面来使代码更加高效,需要的朋友可以参考下
      2016-02-29
    • 网站性能优化之CSS无图片技术

      CSS无图片技术是什么?在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果
      2014-11-20
    • CSS 网站性能优化笔记

      CSS 网站性能优化笔记,大家可以结合下js 网站性能优化笔记。
      2011-05-24
    • 对css性能优化的一点看法

      怎么会突然想起谈css与性能优化呢?其实这个问题我已经想了很久了,想写,但是也不知道从何写起,今天就简单的说一下,近段使用通过使用page Speed,对css性能优化的一点看
      2009-09-16
    • css性能优化-will-change使用详解

      will-change通过告知浏览器该元素会有哪些变化,使浏览器提前做好优化准备,增强页面渲染性能。接下来通过本文给大家分享css性能优化-will-change,感兴趣的朋友一起看看吧
      2019-05-06

    最新评论

  • [放鞭炮][福]玉竹斑斑节日快乐![福][放鞭炮] 2019-05-23
  • 三狮军团首秀 只有两千多球迷观战 2019-05-19
  • 人民网2017呼和浩特徒步迎新活动--内蒙古频道--人民网 2019-05-19
  • 【品牌资讯】环球网斩获“全国行业新闻网站传播力2017年6月榜”多项冠军 2019-05-15
  • 深化对经济工作主线的认识 从供需关系看供给侧结构性改革 2019-05-15
  • 格拉斯哥艺术学院起火 4年前曾遭火灾仍在整修 2019-05-14
  • 回复@地瓜干17世:猪临死才会嚎叫呢~ 2019-05-14
  • 婺源古村溪中发现鹰嘴龟 2019-05-08
  • 编辑评测:高夫净源控油平衡露 极速补水长效控油 2019-05-08
  • 四部门发文规范特色小镇建设防止“新瓶装旧酒” 2019-05-02
  • 【地球的盛会文明的聚会艺术的盛宴四海一家足球为人类和平幸福而荣耀!!!普京是当今人类世界最优秀的一代伟人俄罗斯赢啦!!!】 2019-04-29
  • 学习新思想,千万师生同上一堂课 2019-04-28
  • 你这种个体户都干不了的老蚕也配谈计划?真是笑死人不偿命哦? 2019-04-23
  • 感人!的哥带着患病父亲出车 孝心感动乘客 2019-04-23
  • 图解:习近平在纪念马克思诞辰200周年大会上讲话的16个金句 2019-04-16
  • 四川金7乐官网下载苹果版 pk10大小双单计划软件 天津时时彩在哪里开奖记录 江苏时时彩官网 湖南彩票论坛排三排五 46棋牌 北京赛车pk10开奖结果 新时时彩倍偷计算 千禧3d试机号金码关注家彩网 12生肖时时彩开奖结果 新浪彩票1930 二八杠游戏 重庆时时彩走势图诀窍 南国七星彩规律图长条 北京赛车是哪个网站 北京赛车官网博狗