5

私はGoogleWebFontsを使用しています。IE9を除き、すべてのブラウザがフォントを適切にレンダリングしています。（以前のバージョンのIEではテストしていません）。

違いは次のとおりです。IE9とGoogleChrome

HTML：

<head>
        <link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>

Google Fontsファイルの内容：

@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  src: local('Yeseva One'), 
       local('YesevaOne'), 
       url(http://themes.googleusercontent.com/static/fonts/yesevaone/v6/wVgDKaRrT3DN9VGcOY4orxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

CSS：

.sf-menu li {
    float:left;
    position:relative;
    text-align:center;
    font-family:'Yeseva One',cursive;
    font-size:17px;
    line-height: 64px;
    border-bottom:1px solid #4A4A4A;
}

私は何をすべきか？

4

1 に答える 1

4

状況に関する情報はまだ不十分ですが、IE 9でローカルにページをテストしているようです。その場合、コンソールの一部である開発ツール（F12）を見ると、CSS3317エラーメッセージが表示されます。クロスサイトアクセス制限のために@font-faceが失敗したと表示されます。

これは、IE 9で「標準モード」でのみ発生しmetaますが、コードのようにタグを使用すると、このようになります。

問題は開発者の迷惑です（ダウンロードしたアプリケーションとして、ユーザーのシステムでローカルに実行することになっているHTMLアプリケーションを作成している場合を除きます。その場合は、アプリケーションパッケージにフォントファイルを含めます）。HTTPサーバーにファイルをアップロードしてそこからテストする場合、問題は発生しません。

追加：標準モードでもIE 9で正常に動作する デモですが、ダウンロードしてIE 9でローカルに開くと、失敗します（フォールバックフォント、Courierが表示されます）。次に、開発者ツールで、ドキュメントモードをQuirksに設定すると、再び機能します。– Googleは、Googleがホストするフォントを使用することをお勧めしますが、ダウンロードも提供し、非常に寛容な使用規則があります。ただし、ダウンロードリンクは通常、TTFファイル（zip形式）のみを提供するため、 FontSquirrelなどのサービスを使用して他の形式を生成する必要があります。

于 2012-12-16T08:50:21.920 に答える