刷新网页会导致文本在使用字体时变得不可见答案

【问题标题】：Refreshing a webpage causes the text to become unviewable when using a font刷新网页会导致文本在使用字体时变得不可见
【发布时间】：2016-07-29 19:38:42
【问题描述】：

我正在使用 Mac 上的原生 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> 标头标签的标头不会发生这些事情

如果我禁用这个 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 我无法找到一个模式来指示我何时会随便找一个。

【问题讨论】：

发布您认为导致问题的代码
或检查父css类或id的文本颜色属性
@AdamSmith 我添加了代码，如果我注释掉，问题就解决了。我目前在我的 css 中有这个：body { color:#000000 !important; } 作为测试

标签： html css apache fonts

【解决方案1】：

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

【讨论】：