8

@font-faceデータURIを介してフォントファイルを埋め込む宣言を含むCSSファイルがあります。

@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は異なるドメインから提供される埋め込みフォントにCORSヘッダー（ ）を必要とします（CORSの乱用と私の意見ではひどい考え）。私の制御が及ばない理由（官僚主義）のために、フォントファイルでCORSヘッダーを送信することができないため、データURIを介してCSSファイルにフォントファイルを埋め込むという次善の状況に陥っています。Access-Control-Allow-Origin

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 では、?から lastまでのすべて');(データ URI を含む) が追加されることに注意してください。
したがって、あなたの場合、解決策は別の方法を使用することです（たとえば、Mo' Bulletproofer）。

于 2011-08-15T20:57:04.227 に答える