Chrome 中的字体渲染 (woff2) - 加载字体系列后不想更改答案

【问题标题】：Font rendering in Chrome (woff2) - after load font family doesn't want to changeChrome 中的字体渲染 (woff2) - 加载字体系列后不想更改
【发布时间】：2015-05-07 23:11:57
【问题描述】：

为了防止与字体加载时间相关的字体渲染滞后，我编写了一些简单的脚本，该脚本加载包含 @font-face 的 CSS 和延迟的自定义字体。由于该解决方案，默认情况下使用系统字体（无延迟），然后它们被新 CSS 和新字体覆盖。但是，除了 Chrome 之外，解决方案在任何地方都适用。在 chrome 网络选项卡中，我可以看到字体已加载，但不知何故它们没有重新渲染。

它在 IE 和 Firefox 中的外观（所需字体）：

和 Chrome（系统字体）：

HTML：

 <link data-href="/assets/v2/default/css/font-loader.css" rel="stylesheet" type="text/css" data-mobile="true"/>

默认 CSS：

body{
    font-family: sans-serif;    
}
.price{    
    text-align: right;
    font-size: 22px;    
    font-family: sans-serif;
    letter-spacing: 0.01em;
 }

加载的 CSS：

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'),
         local('PTSans-Regular'),      
         url('https://fonts.gstatic.com/s/ptsans/v8/JX7MlXqjSJNjQvI4heMMGvY6323mHUZFJMgTvxaG2iE.woff2') format('woff2'),
         url('http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff') format('woff'),
         url('../fonts/PT_Sans-Regular.woff2') format('woff2'),  
         url('../fonts/PT_Sans-Regular.woff') format('woff'),  
         url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans Narrow'),
         local('PTSans-Narrow'),      
         url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4SppsHecKHw584ktcwPXSnc.woff2') format('woff2'),
         url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff') format('woff'),
         url('../fonts/PT_Sans-Narrow-Web-Regular.woff2') format('woff2'),  
         url('../fonts/PT_Sans-Narrow-Web-Regular.woff') format('woff'),  
         url('../fonts/PT_Sans-Narrow-Web-Regular.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body{
    font-family: 'PT Sans', sans-serif;
}
.price{
    font-weight: normal;    
    font-family: 'PT Sans Narrow', sans-serif;
    letter-spacing: normal;
    font-size: 30px;
}

JS：

(function (document) {
    var loadScripts = function () {
        var uaString = navigator.userAgent,
                isMobile = function () {
                    return uaString.indexOf('android') > -1 || uaString.indexOf('Android') > -1 || uaString.indexOf('Mobile') > -1 || uaString.indexOf('mobile') > -1 || uaString.indexOf('iPhone') > -1
                };

        this.styles = document.querySelectorAll('link[data-href]');
        for (var i = 0; i < this.styles.length; i++) {            
            if (this.styles[i].getAttribute('data-mobile') === 'false' && isMobile()) {
                return;
            }            
            this.styles[i].setAttribute('href', this.styles[i].getAttribute('data-href'));
        }

    };
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', loadScripts);
    } else {
        document.attachEvent('onreadystatechange', function (e) {
            if (document.readyState === "complete") {
                loadScripts();
            }
        });
    }
}(document));

【问题讨论】：

标签： css google-chrome fonts font-face woff2

【解决方案1】：

您指定的 woff2 文件没有拉丁字符。您必须复制字体的“cyrillic-ext”子集的 URL。

您应该使用“拉丁”子集。把 woff2 的 url 改成这样：

url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2') format('woff2'),

【讨论】：

【解决方案2】：

当我将代码更改为：WOFF2 字体时才会出现此问题：

@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans Narrow'),
         local('PTSans-Narrow'),               
         /*Remove woff2 from here and load woff instead*/
         url(https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff'),
         url(../fonts/PT_Sans-Narrow-Web-Regular.woff2) format('woff2'),  
         url(../fonts/PT_Sans-Narrow-Web-Regular.woff) format('woff'),
         url(../fonts/PT_Sans-Narrow-Web-Regular.ttf) format('truetype');
}

效果很好。

【讨论】：