Chrome 页面加载时未加载 Webfont

Question

我在 Chrome 版本“48.0.2564.82 m（64 位）”上加载 WebFont 时遇到问题。

问题是当我加载页面或通过使用刷新功能以外的任何方式导航到页面时，未应用网络字体。

这是我的 CSS 文件中的代码段，我在其中加载并设置字体：

@import url(//fonts.googleapis.com/css?family=Lato:400,300italic,700);

body, html {
    width: 100%;
    height: 100%;
    background-color: #444444;
    font-family: 'Lato', sans-serif, arial;
}

我在这里对这个问题做了一个 gfycat： https://gfycat.com/UnfoldedAlarmingFoxhound

有什么线索吗？

Answer 1

首先你需要确保@import 位于 CSS 文件的顶部，除此之外，你的 URL 已被注释掉，而不是用引号括起来并且开头没有 'http'。

应该是什么

@import url(http://fonts.googleapis.com/css?family=Lato:400,300italic,700);

试试这个 -

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Answer 2

这是一个已知问题，他们已针对版本 49.0.2623.13 修复了该问题。用金丝雀试试。

https://code.google.com/p/chromium/issues/detail?id=579912&q=font%20os%3DWindows&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

Chrome 页面加载时未加载 Webfont

Webfont not loading on page load on Chrome

html

css

google-chrome

webfonts