Chrome (woff2) 中的字体呈现 - 加载字体系列后不想更改

Question

为了防止与字体加载时间相关的字体渲染滞后，我编写了一些简单的脚本，加载 CSS 包含 @font-face 和自定义字体，但有一些延迟。由于该解决方案，默认情况下使用系统字体（无滞后），后来它们被新 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));

Answer 1

当我将代码更改为：

时，该问题仅出现在 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');
}

它工作正常。

Answer 2

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

您应该使用 'latin' 子集。把woff2的url改成这样：

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

Chrome (woff2) 中的字体呈现 - 加载字体系列后不想更改

Font rendering in Chrome (woff2) - after load font family doesn't want to change

css

fonts

google-chrome

font-face

woff2