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

Question

私は本当にまっすぐな何かが欠けていると確信しています。通常のフォントの顔を持つ単一のカスタムフォントを使用して：

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

私はそれを使用すると、すべてが正常に動作しますが、私は何をしますか、別のカスタムフォントを追加したい場合は？私は次のフォントをカンマ区切りにするか、他のフォント面全体を追加しようとしましたが、2番目のフォントが機能しなくなりました。あなたの2番目のフォントがまだ動作しない場合

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

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

、あなたは正しくその書体名とそのファイル名のスペルをしている、お使いのブラウザのキャッシュが動作していることを確認し、あなた：

Answer 1

あなたは、単に別の@font-faceルールを追加しますOSは同じ名前のフォントを使いこなしていません。

Answer 2

チェックアウトfontsquirrel。彼らはあなたのフォントに適したスタイルシートを吐き出すウェブフォントジェネレータを持っています（ "@ font-face kit"を探してください）。このスタイルシートは、独自に含めることも、テンプレートとして使用することもできます。

Answer 3

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

<!--[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ファイルを使用する必要があります。

私はHTMLファイルの先頭に自分のフォントを含めています。それで、条件付きIEタグを使ってeotやttfファイルを使用することができます。

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

希望に役立ちます。

Answer 4

フォントの動作に問題がある場合は、これも過去にありましたが、見つけた問題はfont-family：という名前になっています。これは、実際に与えられたフォント名と一致しなければならなかった。

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

たとえば、あるプロジェクトでGill Sansを使用していましたが、実際のフォントはGill Sans MTと呼ばれていました。隙間を埋めることも大事にすることも重要でした。

希望に役立ちます。

Answer 5

は、私が今働いて、私はそれを試してみたとき、私は小さな構文エラーを作っていたが判明し、私の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 */ 
}