css - Google 字体 (Lato) 无法在 Google Chrome 上呈现

Question

当我在 Google Chrome 中加载网站时，使用 Lato 字体的文本不会随机显示(在模式或导航标题链接中)。在我悬停样式链接或重新触发检查器中的任何 CSS 属性后 - 文本变得可见。

我尝试过不同的解决方案，例如 this ，但对我不起作用。

我正在本地加载字体。这是我的字体 scss:

// Lato
//
// The Lato font in a Sass format to be imported easily in any 
// project.
// sass-lint:disable no-duplicate-properties

$fontface-src: '../assets/fonts' !default;

// Regular
@font-face {
    font-family: 'Lato';
    src: 
        url($fontface-src + '/lato/Lato-Regular.svg') 
format('svg'),
        url($fontface-src + '/lato/Lato-Regular.ttf') 
format('truetype'),
        url($fontface-src + '/lato/Lato-Regular.woff') 
format('woff'),
        url($fontface-src + '/lato/Lato-Regular.eot'),
        url($fontface-src + '/lato/Lato-Regular.eot?#iefix') 
format('embedded-opentype');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}

// Light
@font-face {
    font-family: 'Lato';
    src:
        url($fontface-src + '/lato/Lato-Light.svg') format('svg'),
        url($fontface-src + '/lato/Lato-Light.ttf') 
format('truetype'),
        url($fontface-src + '/lato/Lato-Light.woff') 
format('woff'),
        url($fontface-src + '/lato/Lato-Light.eot'),
        url($fontface-src + '/lato/Lato-Light.eot?#iefix') 
format('embedded-opentype');
    font-weight: normal;
    font-weight: 300;
    font-style: normal;
}

Answer 1

我很确定这与不同字体文件的顺序有关。浏览器会选择它支持的第一个文件格式，而 SVG 已经很老派了，所以您可能会遇到这种奇怪的行为。

检查这个答案:What's the correct order to load fonts in?

Paul Irish suggests that the 'bullet proof' way to load fonts is to render EOT first, followed by WOFF, TTF, and lastly SVG.