Question

当我在Google Chrome中加载网站时，使用Lato字体的文字不会随机显示（在模式或导航标题链接中）。在我悬停样式化链接或重新触发Inspector中的任何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?

保罗爱尔兰人建议“防弹”＆＃39;加载字体的方法是首先渲染EOT，然后是WOFF，TTF，最后是SVG。

Google字体（Lato）无法在Google Chrome上呈现

1 个答案: