为什么我的@font-face 只在 ie9 中损坏？答案

【问题标题】：Why is my @font-face broken in ie9 only?为什么我的@font-face 只在 ie9 中损坏？
【发布时间】：2012-02-19 23:37:28
【问题描述】：

我正处于站点构建的 ie 测试阶段，我无法让字体在 ie9 中工作。奇怪的是它们在 ie7 & ie8 和兼容模式下工作得很好。也许更奇怪的是演示文件工作得很好。我意识到这表明我的管道可能搞砸了，但我在任何地方都找不到问题。

我想知道是否有什么东西破坏了这个网站的 ie9 中的所有字体——在我看来，它们都像是“新罗马时代”。

EDIT：更新了下面的代码。仍然遇到此问题。

以下是其中一种字体的一些相关信息和示例代码。总共有 5 种字体，它们都是这样设置的，并且遇到了同样的问题。

测试站点：http://dev.citylightphilly.com

文件结构： /wp-content/themes/my_theme/fonts/ 中的所有字体和样式表.css

HTML（在 header.php 中）

<!-- @Font-Face Webfonts --> 
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?  >/fonts/stylesheet.css" />
<!-- CSS : implied media="all" -->
    <?php versioned_stylesheet($GLOBALS["TEMPLATE_RELATIVE_URL"]."style.css?v=2") ?>

CSS (/fonts/stylesheet.css)

@font-face {
font-family: 'NovecentowideBold';
src: url('Novecentowide-Bold-webfont.eot');
src: url('Novecentowide-Bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('Novecentowide-Bold-webfont.woff') format('woff'),
     url('Novecentowide-Bold-webfont.ttf') format('truetype'),
     url('Novecentowide-Bold-webfont.svg#NovecentowideBold') format('svg');
font-weight: normal;
font-style: normal;

CSS (style.css)

h3, h4, h5, h6, nav {
  font-family: 'NovecentowideBold', 'Myriad Headline', Tahoma, Calibri, sans-serif;
}

【问题讨论】：

这不是 wordpress 问题，而是 CSS 问题。
在 WP 驱动的网站上出现 CSS 问题并不意味着它是 WP 问题。迁移到 Stack Overflow，这将成为主题并会得到一些高质量的答案。
NovecentowideMedium ≠ Novecentowide-Medium
很好——实际上是上面代码中的错字，但不是我的 css 文件中的错字——我一定是在复制它时犯了错误。在编辑中修复它。这个问题实际上发生在网站上的所有@字体上。我将深入研究 F12 控制台，看看我能不能想出什么。同时我会更新上面的问题。

标签： css stylesheet cross-browser

【解决方案1】：

我认为这可能是在

中找到的 CSS 中的代码

http://dev.citylightphilly.com/wp-content/themes/citylight2/style.css

尝试删除此部分：

body, p, li { 
  font-family: ;
  line-height: 150%;
}

我觉得其他的都不错。

【讨论】：

感谢 font squirrel - 我会在今晚晚些时候有空的时候研究一下。我很感激你的意见。我没有意识到我有一个空元素。
太棒了。有时问题是偷偷摸摸的。实际上是通过 Safari 中的网络检查器解决了这个问题。 :-p

【解决方案2】：

试试这个

@font-face {
    font-family: "actuall font name";
    src:url( "http://localhost//fonts/fontname.TTF ");
}

src url 应该是完整的域。

【讨论】：

我实际上对这个问题做了一些阅读——我认为 ie9 实际上阻止了跨域字体请求。看到这个帖子：stackoverflow.com/questions/5065362/…
这对我来说很好，也许您正在使用 ie9 兼容性视图进行检查，进入 f12 开发人员工具并通过更改浏览器模式进行检查...
信不信由你@font-face 实际上在兼容模式下工作，但不是在常规模式下