Question

我遇到的问题是，我从同一台服务器托管的字体正在从中提供，而不是在IE9中加载。然而，这并非总是如此。大多数时候它正确加载。我注意到，当它没有正确显示时，IE9加载.eot？（请参阅关于问号的CSS）,. woff和.ttf字体文件。当字体显示正确时，它只加载.eot？文件。这是我的CSS

@font-face
{
  font-family: Rokkitt;
  src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot');
  src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/Hormel/Fonts/rokkitt-bold-webfont.woff') format('woff'),
       url('/Hormel/Fonts/rokkitt-bold-webfont.ttf') format('truetype'),
       url('/Hormel/Fonts/rokkitt-bold-webfont.svg#rokkittbold') format('svg');
}

我还将.woff添加到IIS MIME类型，之前我在尝试加载.woff文件时遇到404错误，并且它不会加载.ttf文件，并且字体仍然无法正确显示。 / p>

根据我的阅读，IE9应该使用第一个.eot文件，而不是.eot？iefix文件，这是正确的吗？

我尝试从google字体库加载此字体，但我遇到的字体方面问题并不总是正确显示。

我不知道这是否有所不同，但我在目标网页上加载了CSS。当用户点击某个元素时，我会对该页面进行ajax调用，以便在显示的灯箱中显示。这是字体无法正确显示的位置。此外，当我尝试检查灯箱中的内容时，检查员会说容器（总是在页面上没有加载任何内容）是空的。

编辑**

因此，当字体无法加载时，我得到3 CSS3117: @font-face failed cross-origin request. Resource access is restricted.，一个用于.eot？#iefix文件，一个用于.woff文件，另一个用于.ttf文件。

这是来自Google，当我从与网页相同的服务器提供字体文件时。

我还从Google加载了其他两种字体，但它们没有任何问题。只是Rokkitt字体。

我添加了

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

到web.config文件并将Access-Control-Allow-Origin添加到服务器上的响应头。

有时，字体在IE9中无法正确加载

0 个答案: