1

我在主域下有我的 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>
4

4 回答 4

3

这是一个 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 -> 除了@font-face
      • 字体-face.css ->src: url("fonts/font.eot")
      • /字体/
        • 字体.eot
  • /子域/
    • index.htm -> 参考http://domain.com/css/main.css和css/font-face.css
    • /css/
      • 字体-face.css ->src: url("fonts/font.eot")
      • /字体/
        • 字体.eot
于 2012-09-26T06:16:22.303 回答
0

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

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

于 2012-09-25T22:03:23.893 回答
0

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

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

@font-face 导入无法在离线网站/不同主机中使用仅通过 IE 中的 CSS 使用在线字体

他的问题最终是 EOT 文件本身的一些问题，但 CORS 问题已在已接受答案的原始答案部分中得到解决。

于 2012-09-25T22:14:57.310 回答
0

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

IE 是一个特例，为此您可以使用一个名为Prefix Free的库。并在这里查看浏览器中的@font-face 支持

@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");
}
于 2012-09-26T06:26:48.717 回答