2

確認したところ、フォント ファイルはサーバー上にあります。

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('fontface/DroidSerif-Regular-webfont.eot');
    src: url('fontface/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/DroidSerif-Regular-webfont.woff') format('woff'),
         url('fontface/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('fontface/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    src: local('☺'),
         url('fontface/DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'DroidSerifItalic';
    src: url('fontface/DroidSerif-Italic-webfont.eot');
    src: url('fontface/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontface/DroidSerif-Italic-webfont.woff') format('woff'),
         url('fontface/DroidSerif-Italic-webfont.ttf') format('truetype'),
         url('fontface/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
    src: local('☺'),
         url('fontface/DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

編集: 奇妙なのは、フォントが IE8 では正しく表示されているが、IE9 や IE10 では正しく表示されていないことです。

私も試しました：

@font-face {
    font-family: 'DroidSerifRegular';
    src: local('☺'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.woff') format('woff'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('http://www.mysite.ca/themes/mysite/fontface/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

そして私の.htaccess：

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

別の編集：

IE にチェックインしたところ、次のメッセージが表示されます。

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable
4

3 に答える 3

0

バージョン 8 より前の IIS サーバーには、デフォルトで MIME タイプ「woff」が追加されていないようです。それをリスト (サーバー > サイト > mime-types) に追加すれば問題ありません。これにより、少なくとも IE 11 の CSS3114 エラーが解決されました。FF と Chrome では、この点で制限が緩くなっているように見えるため、問題はありませんでした。

于 2014-11-11T17:30:08.950 に答える