1

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

网络选项卡

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

标题 Firefox 和 IE

和 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));
4

2 回答 2

2

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

您应该使用“拉丁”子集。将 woff2 的 url 更改为：

url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2') format('woff2'),
于 2015-03-20T10:26:19.073 回答
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');
}

它工作正常。

于 2015-03-06T11:40:37.180 回答