Mac 版 Chrome 中的网站上未显示文本答案

【问题标题】：Text is not showing on website in Chrome for macMac 版 Chrome 中的网站上未显示文本
【发布时间】：2014-03-10 22:04:24
【问题描述】：

在我调整窗口大小或显示开发人员工具之前，我正在处理的 Wordpress 网站上的文本不会显示在 Chrome for mac 中。问题也不一致；有时它会显示段落但不显示标题。

这个问题在开发过程中的某个时候出现了，我不确定是什么时候。

问题的两张截图（之前和之后）： screenshot1 screenshot 2

网址：insidefitness.dk

非常感谢任何帮助。提前致谢！

【问题讨论】：

标签： html css wordpress macos google-chrome

【解决方案1】：

是的，我可以复制这个问题。当您的 css 被触发时，很可能“Ubuntu”网络字体还没有准备好。

编辑：

解决方案

在你的 main.css 中包含这个：

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

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

事实证明这是一个 Chrome 问题：

Issue 336476: External Font not rendering until forced repaint

【讨论】：

感谢您的意见。虽然它似乎并没有解决问题。我正在摆弄不同的方式来加载字体并希望找到解决方案。
您确定将代码复制/粘贴/保存到您的 head 部分和您的 main.css 样式表之前？
是的。我可以看到head部分中的代码覆盖了css，但它仍然没有显示标题。
我看到它是在 main.css 样式表之后加载的。您是否也尝试在主要脚本和链接之前放置？
我现在已经把它放在了头部的最顶部，但它仍然不起作用。你有什么其他的建议？顺便说一句，感谢您的努力。

【解决方案2】：

检查您的控制台 > 网络。看起来您的 css 已被触发，但字体尚未加载。您能否尝试在加载 css 之前确保您拥有字体？

以下设置应该可以工作，这与您的设置不同，因为您在 css 文件中加载了字体。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

【讨论】：

感谢您的意见。虽然它似乎并没有解决问题。我正在摆弄不同的方式来加载字体并希望找到解决方案。