Google字體（Lato）不在Google Chrome上呈現

當我在Google Chrome中加載網站時，使用Lato字體的文本不會隨機顯示（在模式或導航標題鏈接中）。懸停樣式化鏈接後，或者在Inspector中重新觸發任何CSS屬性 - 文本變得可見。Google字體（Lato）不在Google Chrome上呈現

我試過不同的解決方案，如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; 
}

來源

2017-04-24 Abel

你能舉個例子嗎？ – RacoonOnMoon

我很確定它與不同的字體文件的順序有關。瀏覽器選擇它支持的第一種文件格式，而SVG很老派，所以你最終可能會遇到這種奇怪的行爲。

檢查這個答案：What's the correct order to load fonts in?

保羅愛爾蘭表明，「防彈」的方式來加載字體是第一渲染EOT，其次是WOFF，TTF，最後SVG。

來源

2017-04-24 21:08:30

Google字體（Lato）不在Google Chrome上呈現

回答

相關問題