html - 刷新网页会导致使用字体时无法查看文本

Question

我正在 Mac 上使用 native AMP 堆栈进行开发。这不是一个真正的问题，而是一个错误和烦恼。当我使用 css 设置页面字体样式时，我网页上的文本变得不可见，或者与背景颜色相同。文本仍然存在，因为我可以继续选择它，然后复制/粘贴它。我在文档主体(php 或 html 页面)中遇到了这个问题，但在使用 iframe 显示的页眉中却没有。

此问题仅在使用 Google Chrome 或 Opera 时出现。使用 safari 时不会发生这种情况(尚未检查 firefox)。使文本再次可见的唯一方法是单击地址栏并按回车键，或者离开页面然后再返回页面。在 chrome 中使用 inspect 显示文本仍然着色为“#000000”。

我认为这个问题与未加载字体有关，因为在谷歌浏览器中使用检查元素时，控制台中会显示此错误:“Failed to load resource: the server responded with a status of 404 (Not Found)”。这很奇怪，因为我仔细检查了所有字体文件的名称和位置，当我导航到检查窗口的字体部分时，它们都显示得很好。当我检查首次出现的页面时，它在控制台中显示以下错误:“GET http://localhost/Aller/Aller_Lt.tff test.php:1”和“GET http://localhost/Aller/Aller_Lt.tff header.htm:1”。

如有任何帮助或建议，我们将不胜感激。我还可以发布代码示例，或回答任何其他问题以深入了解这一点。

编辑

使用 <h1></h1> 的 header 不会发生这些事情标题标签

如果我禁用这个 css，那么我的页面就可以正常工作。

@font-face {
  font-family: Aller;
  src: url(Aller/Aller_Rg.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Aller;
  src: url(Aller/Aller_Bd.tff);
  font-weight: bold;
}
@font-face {
  font-family: Aller;
  src: url(Aller/Aller_BdIt.tff);
  font-weight: bold;
  font-style: italic;;
}
@font-face {
  font-family: Aller;
  src: url(Aller/Aller_Lt.tff);
  font-weight: lighter;
}
@font-face {
  font-family: Aller;
  src: url(Aller/Aller_LtIt.tff);
  font-weight: lighter;
  font-style: italic;
}
@font-face {
  font-family: Aller;
  src: url(Aller/Aller_It.tff);
  font-style: italic;
}
body {
  font-family: Aller;
}

编辑2

有时在第一次加载页面时，甚至在重新加载时我会得到这些错误:GET http://localhost/Aller/Aller_Lt.tff test.php:1 , GET http://localhost/Aller/Aller_Bd.tff test.php:1 , 和 GET http://localhost/Aller/Aller_Lt.tff Aller/Aller_Lt.tff:1我一直无法找到一种模式来指示我何时会得到一个或另一个。

Answer 1

我已经解决了刷新页面时文本消失的问题。原因似乎是我安装了字体，它们使用的字体系列与我使用的 css 相同。我从我的 css 中删除了 @font-face 部分，一切正常。没有错误，页面刷新也很好。