@font-face 不适用于 IE 和 Firefox 中的子域

Question

我的 CSS 文件和字体文件都在主域下，比如说在

http://www.mydomain.com/css 和 http://www.mydomain.com/fonts

我在一些子域上也有文件，这些文件需要共享 css 和字体 主域文件的样式。因此，我只是在我的文件顶部：

<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/css/algemeen.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/css/gemeenten.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/css/sidebars.css" media="all" />

一切都很好，CSS 显示得很好。但是，在这些 CSS 文件中，我使用了@font-face。此代码本身在所有浏览器中都可以正常工作，至少对于主域上的文件是这样。所以http://www.mydomain.com/index.php 在所有浏览器中完美地显示了我选择的字体。但是，我的子域上使用相同 CSS 的 index.php 没有在 IE 或 Firefox 中显示我选择的字体！它只使用标准的 Arial。 Safari、Opera 和 Chrome 运行良好。这怎么可能？我的@font-face 代码：

@font-face {
   font-family: "Nova"; font-weight: normal;
    font-style: normal;
   src: url("../fonts/proximanova-regular.eot");
}
@font-face {
   font-family: "Nova";
   src: url("../fonts/proximanova-semibold.eot");
   font-weight: 900;
}
@font-face {
   font-family: "Nova"; font-weight: normal;
    font-style: normal;
   src: url("../fonts/proximanova-regular.ttf") format("truetype");
}
@font-face {
   font-family: "Nova";
   src: url("../fonts/proximanova-semibold.ttf") format("truetype");
   font-weight: 900;
} 

谢谢大家！

已经在字体文件夹中添加了带有此代码的 .htaccess：

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Answer 1

这是一个 CORS 问题。

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

http://www.w3.org/TR/cors/

http://enable-cors.org/

更简单的解决方案只是复制您的字体文件，以便它们存在于子域中。大部分 CSS 代码都很好，只是您需要将 @font-face 代码放入一个相对链接到本地​​字体文件夹的新文件中。在两个域中保持结构相同意味着您只需 c+p CSS/字体，而无需创建特定代码。

• /www/
  • /css/
    • main.css -> 除了@font-face 之外的所有内容
    • font-face.css -> src: url("fonts/font.eot")
    • /字体/
      • 字体.eot
• /子域/
  • index.htm -> 参考 http://domain.com/css/main.css 和 css/font-face.css
  • /css/
    • font-face.css -> src: url("fonts/font.eot")
    • /字体/
      • 字体.eot

Answer 2

您是否检查了字体文件的文件路径？那将是我首先要看的地方。如果您的子域设置为 Web 根目录的子文件夹，则需要更改这些文件路径。

考虑使用绝对路径而不是相对路径：http://www.domain.com/fonts/proximanova-semibolt.tff 而不是 ../fonts/proximanova-semibold.tff

Answer 3

听起来像是 CORS 问题。该解决方案最有可能在主服务器上更新您的 .htaccess 文件。

如果您查看此问题的答案，我认为它会对您有所帮助：

@font-face import not working in offline website/different host using online fonts via CSS in IE only

他的问题最终是 EOT 文件本身的问题，但 CORS 问题已在已接受答案的 ORIGINAL ANSWER 部分中解决。

Answer 4

确保你拥有所有格式，然后你可能需要检查重量，mozilla 有时会用粗体和默认值，这段代码对我有用，希望对你有很大帮助。

IE 是一种特殊情况，为此您可以使用名为Prefix Free 的库。 看看这里support @font-face in browsers

@font-face
{
    font-family: "MyFavoriteFont";
    src: url("KomikaTitle-webfont.eot");
        xsrc: url("KomikaTitle-webfont.eot?#iefix") format("embedded-opentype"),
     url("KomikaTitle-webfont.woff") format("woff"),
     url("KomikaTitle-webfont.ttf") format("truetype"),
     url("KomikaTitle-webfont.svg#KomikaTitleRegular") format("svg");
}