字体加载然后闪烁以正确字体答案

【问题标题】：Font loads then flickers to correct font字体加载然后闪烁以正确字体
【发布时间】：2018-07-11 16:05:10
【问题描述】：

我正在本地加载自定义字体，但是当我的网站加载时，它似乎显示了默认字体，然后才闪烁到正确的字体。

现场示例：https://www.moneynest.co.uk/property-vs-shares/

谁能帮忙？

/* Open Sans regular */

@font-face {
  font-family: "Open Sans";
  src: url("./wp-includes/fonts/OpenSans-Regular.eot"); /* IE9 Compat Modes */
  src: url("./wp-includes/fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./wp-includes/fonts/OpenSans-Regular.otf") format("opentype"), /* Open Type Font */
    url("./wp-includes/fonts/OpenSans-Regular.svg") format("svg"), /* Legacy iOS */
    url("./wp-includes/fonts/OpenSans-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./wp-includes/fonts/OpenSans-Regular.woff") format("woff"), /* Modern Browsers */
    url("./wp-includes/fonts/OpenSans-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Open Sans";
  src: url("./wp-includes/fonts/OpenSans-Bold.eot"); /* IE9 Compat Modes */
  src: url("./wp-includes/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./wp-includes/fonts/OpenSans-Bold.otf") format("opentype"), /* Open Type Font */
    url("./wp-includes/fonts/OpenSans-Bold.svg") format("svg"), /* Legacy iOS */
    url("./wp-includes/fonts/OpenSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./wp-includes/fonts/OpenSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("./wp-includes/fonts/OpenSans-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700;
  font-style: bold;
}

【问题讨论】：

听起来像 FOUC（无样式内容的 Flash）。您可以考虑使用 js 仅在加载所有内容时显示内容。
他们肯定必须离开来解决这个问题，而不会减慢一切？
如果有的话，就是字体加载速度不够快，导致速度变慢。 This may help you.
感谢 Xoog，第一次加载页面时它仍然闪烁，但字体保持不变 - 第一次正确加载（从下面修复）。一旦我进入第二页等，就没有更多的闪光了。有没有办法消除第一次闪光？

标签： html css wordpress fonts

【解决方案1】：

请在您的 URL 中添加带有 https 而不是 HTTP 的字体的完整路径

@font-face {
  font-family: "Open Sans";
  src: url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.eot"); /* IE9 Compat Modes */
  src: url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.otf") format("opentype"), /* Open Type Font */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.svg") format("svg"), /* Legacy iOS */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700;
  font-style: bold;
}

EXAMPLE

【讨论】：

谢谢，已经这样做了。但仍然遇到同样的问题。
我认为您误解了 - 字体正在加载。他正在经历 FOUC。
刚刚为浅色字体添加了一个额外的样式，它似乎已经解决了这个问题（以及添加完整路径）哇！
不要相信这是 FOUC @Xoog，因为我在本地添加字体，这是 FOUC 的修复之一。
@Raj 正确的字体现在首先加载，但在第一页加载时，我仍然得到一个 Flash（尽管之后字体保持不变）。访问第二页等时不再闪烁。