首次访问时未加载自定义字体

Question

我创建了一个新网站 (http://www.glutenfreekate.com) 并使用了我在 style.css 中包含的自定义字体。我以前使用过自定义字体，从来没有遇到过任何麻烦。这次我遇到了以下问题：

当我第一次访问该页面或清空缓存后，字体未加载。换句话说：没有文字。它没有使用其他字体，但根本没有。不过，它似乎为这些词留下了空间。它似乎是看不见的。当我点击页面上的任意位置时，它会被加载，并且在每次后续访问时都会出现。

这个问题似乎只存在于当前的 Chrome 中。

我尝试将它添加到导入所有其他样式表的 style.css 以及使用该字体的样式表的最顶部。两者都没有帮助。

我尝试重命名字体文件和字体名称，但没有任何成功。

代码如下：

@font-face {

font-family: 'aaarghnormal';
  src: url('../katebreuerme/fonts/aaargh.eot');
  src: url('../katebreuerme/fonts/aaargh.eot?#iefix') format('embedded-opentype'),
  url('../katebreuerme/fonts/aaargh.woff') format('woff'),
  url('../katebreuerme/fonts/aaargh.ttf') format('truetype'),
  url('../katebreuerme/fonts/aaargh.svg#aaarghnormal') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "aaarghnormal", Helvetica, Century Gothic, Verdana, sans-serif, serif, Courier, monospace;
}

关于如何解决这个问题的任何想法？如果我的读者在第一次访问时没有看到字体，我认为这不是一件好事……

谢谢！

Answer 1

也许没什么，但你有：

@import url("css/style.css");

@font-face {
    font-family: 'aaarghnormal';
    src: url('../katebreuerme/fonts/aaargh.eot');
    src: url('../katebreuerme/fonts/aaargh.eot?#iefix') format('embedded-opentype'),
    url('../katebreuerme/fonts/aaargh.woff') format('woff'),
    url('../katebreuerme/fonts/aaargh.ttf') format('truetype'),
    url('../katebreuerme/fonts/aaargh.svg#aaarghnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

您的 css/style.css 是否使用该字体？ 因为也许第一次字体还没有加载，你尝试在 css/style.css 上使用它，我错了吗？

尝试更改它并首先加载字体并将 css/style.css 直接包含在 html 文件中.. 不确定这是否会解决您的问题，但尝试无需任何费用