css - IE9 拒绝加载自定义字体？

Question

我正在尝试让 IE9 显示自定义字体。应该很容易...研究了大量的谷歌网站，甚至是 stackoverflow 问题。这是我得到的:

@font-face {
    font-family: "BrushstrokePlain";
    src: url("../../fonts/BRUSHSTP-webfont.eot");
    src: url("../../fonts/BRUSHSTP-webfont.eot?#iefix") format("embedded-opentype"),
         url("../../fonts/BRUSHSTP-webfont.woff") format("woff"),
         url("../../fonts/BRUSHSTP-webfont.ttf") format("truetype"),
         url("../../fonts/BRUSHSTP-webfont.svg#BrushstrokePlain") format("svg");
    font-weight: normal;
    font-style: normal;
}

但IE9固执地不配合。实时站点是:http://family.steps.org.au

它适用于所有浏览器和 IE 7 & 8，除了 IE9 :(

---

编辑

这是我添加到我的 nginx 配置中以使其正常工作的内容:

location ~* \.(eot|ttf|woff)$ {
  add_header Access-Control-Allow-Origin *;
}

Answer 1

您的问题与您的 HTTP header 有关。尝试将此添加到您的 Apache 配置文件中:

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

将 mydomain.com 替换为您的域。您在 ie9 中遇到跨源错误，因为您可能没有在配置中正确设置 .ttf 文件。上面的代码应该可以解决这个问题。仔细检查，因为您的配置中可能已经有了这个，您可能只是没有指定所有文件类型。