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

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 文件中。 不确定这是否会解决您的问题，但尝试无需任何费用