Question

我在主域下有我的CSS文件和我的Font文件，让我们说在

下

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 en 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;
}

谢谢你们！

已经在fonts文件夹中添加了一个带有此代码的.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 /字体而无需创建特定的代码。

/网络/
- / CSS /
  - main.css - ＆gt;除@font-face
  - font-face.css - ＆gt; src: url("fonts/font.eot")
  - /字体/
    - font.eot
/子域/
- index.htm - ＆gt;参考http://domain.com/css/main.css和css/font-face.css
- / CSS /
  - font-face.css - ＆gt; src: url("fonts/font.eot")
  - /字体/
    - font.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有时需要大胆的defualt，这段代码对我有用，希望会有很大的帮助。

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");
}

@ font-face无法在IE和Firefox的子域中工作

4 个答案: