web-dev-qa-db-ja.com

@ font-faceを使用して複数のカスタムフォントを使用しますか？

私は本当に簡単なものが欠けていると確信しています。通常のフォントフェイスで単一のカスタムフォントを使用しています。

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

使用するとすべて正常に動作しますが、別のカスタムフォントを追加する場合はどうすればよいですか？次のコンマでコンマで区切るか、他のフォントフェース全体を追加しようとしましたが、2番目のフォントが機能しません。

csscss3fontsfont-face
62
James MV

別の@font-faceルールを追加するだけです：

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

それでも2番目のフォントが機能しない場合は、書体名とファイル名のスペルが正しいこと、ブラウザキャッシュが動作していること、OSが同じ名前のフォントをいじっていないことなどを確認してください。

115
BoltClock

フォントの動作に問題がある場合、私も過去にこれを経験しており、私が見つけた問題はfont-family：の名前にあります。これは、実際に与えられたフォント名と一致する必要がありました。

これを見つける最も簡単な方法は、フォントをインストールし、表示名が指定されているかどうかを確認することでした。

たとえば、あるプロジェクトでGill Sansを使用していましたが、実際のフォントはGill Sans MTと呼ばれていました。間隔を空けたり、大文字を使用したりすることも重要です。

お役に立てば幸いです。

7
Adam Stacey

fontsquirrel をご覧ください。 Webフォントジェネレーターがあり、フォントに適したスタイルシートも生成されます（ "@ font-face kit"を探してください）。このスタイルシートは独自のスタイルシートに含めることも、テンプレートとして使用することもできます。

5
tdammers

複数のフォントフェイスを非常に簡単に使用できます。以下は、過去にどのように使用したかの例です。

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

フォントは異なるブラウザ間で面白いことがあることに注意する価値があります。以前のブラウザのフォントフェイスは機能しますが、ttfの代わりにeotファイルを使用する必要があります。

そのため、条件付きIEタグを使用してeotまたはttfファイルを適宜使用できるため、htmlファイルの先頭にフォントを含めています。

この目的でttfをeotに変換する必要がある場合は、 http://ttf2eot.sebastiankippe.com/ でオンラインで無料で実行できるすばらしいWebサイトがあります。

お役に立てば幸いです。

3
Adam Stacey

私はcssファイルでこのメソッドを使用します

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
3
5ulo