8

我有一个带有@font-face声明的 CSS 文件，它通过数据 URI 嵌入字体文件：

@font-face {
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        /* ugly FF same-Origin workaround... */
        url("data:application/octet-stream;base64,d09GRgABAAAAA ... ") format('woff'),
        url('ttf/font.ttf') format('truetype'),
        url('svg/font.svg#Custom-Font') format('svg');
    }

使用数据 URI 嵌入字体会导致 IE < 9 不加载字体。如果我删除该行（或将其更改回引用.woff文件），IE 将加载字体。

这个 CSS 会混淆 IE 怎么办？

背景：我有一个从不同域（CDN）加载嵌入字体的页面。不幸的是，Mozilla需要Access-Control-Allow-Origin在来自不同域的嵌入字体上使用 CORS 标头( )（在我看来，这是对 CORS 的滥用和糟糕的想法）。由于我无法控制的原因（官僚主义），我无法在字体文件上发送 CORS 标头，因此我陷入了通过数据 URI 将字体文件嵌入 CSS 文件的次优情况。

4

2 回答 2

6

我有同样的问题。将嵌入字体移动到不同的声明中对我有用。

@font-face {
    /* Non-FF */
    font-family: 'Custom-Font';
    src: url('eot/font.eot');
    src: url('eot/font.eot?#iefix') format('embedded-opentype'),
        url('svg/font.svg#Custom-Font') format('svg');
}
@font-face {
    /* FF same-Origin workaround... */
    font-family: 'Custom-Font';
    src: url(data:font/truetype;charset=utf-8;base64,d09GRgABAAAAA...) format('truetype');
}
于 2012-11-04T08:53:26.737 回答
4

可能已超出最大 URL 长度。
请记住，旧版本的 IE?在最后一个和最后一个之间添加了所有内容');（包括数据 URI）。
因此，在您的情况下，解决方案是使用另一种方法（例如 Mo' Bulletproofer）。

于 2011-08-15T20:57:04.227 回答