0

以下の CSS を使用してフォントをインポートしようとしています。Firefox と IE では機能しますが、Chrome ではサポートされていません。Chromeでも動作させるのを手伝ってもらえますか?

@font-face {
    font-family: "Fontin-Bold";
    src: url(fonts/Fontin-Bold.ttf);
    src: url(fonts/Fontin-Bold.eot);
}
4

1 に答える 1

1

ブラウザーが異なればニーズも異なり、フォントも例外ではありません。完全な例を次に示します。

CSS

@font-face {
    font-family: 'UbuntuBold';
    src: url('ubuntu-bold-webfont.eot');
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-bold-webfont.woff') format('woff'),
         url('ubuntu-bold-webfont.ttf') format('truetype'),
         url('ubuntu-bold-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Font Squirrelのような Font-Face Generator を使用することをお勧めします。

さらに、次の種類のフォント フォルダーに.htaccessを設定する必要があります。

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

編集:

さまざまなフォント形式 とさまざまなブラウザーを よりよく説明するには:

  • Firefox と Safari は TTF または OTF 形式をサポートしています。
  • Internet Explorer は EOT 形式をサポートしています。
  • Firefox 3.6 は、新しい WOFF (Web フォント ファイルの新しい形式の提案) をサポートしています。
  • Google Chrome と iPhone の Safari では、@font-face で SVG ファイルを使用できます。
于 2012-05-03T15:41:14.603 に答える