web-dev-qa-db-ja.com

CSSを使ってカスタムフォントを使う？

自分のサイトでカスタムフォントを使っている新しいWebサイトを見たことがあります（通常のArial、Tahomaなどは除く）。

そして彼らはニースのブラウザをサポートしています。

どうやってそれをするのですか？また、可能であれば、人々がフォントをダウンロードするための無料アクセスを持つことを防ぎます。

cssfont-face
153
Radicate

一般的には、CSSで@font-faceを使用してカスタムフォントを使用できます。これは非常に基本的な例です。

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

それから、ささいなことに、特定の要素でフォントを使うこと：

.classname {
    font-family: 'YourFontName';
}

（.classnameはあなたのセレクタです）。

特定のフォントフォーマットがすべてのブラウザで機能するわけではないことに注意してください。あなたは、 fontsquirrel.com のジェネレータを使って、変換の手間を省くことができます。

あなたは Google Fonts によって提供される無料のウェブフォントの素晴らしいセットを見つけることができます（同じく自動生成されたCSS @font-face規則を持っているので、あなたはそうする必要はありません自分で書いてください。

また、可能であれば、人々がフォントをダウンロードするための自由なアクセス権を持つことを妨げます。

いいえ、CSSを介して埋め込まれたカスタムフォントを使ってテキストをスタイルすることはできません。画像、Flash、または HTML5キャンバス を使用する必要がありますが、いずれもあまり実用的ではありません。

お役に立てば幸いです。

326
Chris

あなたのフォントがクロスブラウザ互換であることを確認するために、あなたがこの構文を使うことを確認してください：

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

ここ からとられています 。

28
Serj Sagan

フォントファイルをダウンロードしてCSSに読み込む必要があります。

F.e.私は私のWebアプリケーションで Yanone Kaffeesatz フォントを使用しています。

私はそれをロードして使用します

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

私のスタイルシートに。

22
akluth

CUFON という面白いツールもあります。この ブログでそれを使用する方法のデモンストレーションがあります それは本当にシンプルで面白いです。また、それは人々が生成されたコンテンツをctrl + c/ctrl + vすることを可能にしません。

4
Periback

Google.com/webfontsまたはfontsquirrel.comから好きなフォントを見つけられない場合は、自分が作成したフォントを使って自分のWebフォントをいつでも作成できます。

これがいいチュートリアルです： あなた自身のフォントフェイスWebフォントキットを作ります

誰かがあなたのフォントをダウンロードできないようにすることについては確信が持てませんが。

お役に立てれば、

4
Eric Robinson

今日、Web上で使用されている4つのフォントコンテナフォーマットがあります：EOT, TTF, WOFF,とWOFF2.

残念ながら、幅広い選択肢があるにもかかわらず、すべての新旧のブラウザで機能する単一のユニバーサルフォーマットはありません。

  • EOTはIEのみです。
  • TTFは部分的にIEをサポートしています、
  • WOFFは最も幅広いサポートを受けていますが、一部の古いブラウザでは利用できません。
  • WOFF2.0のサポートは多くのブラウザで進行中の作業です。

Webアプリケーションがすべてのブラウザで同じフォントを使用するようにしたい場合は、CSSで4つのフォントタイプすべてを指定することをお勧めします。

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
1
Hitesh Sahu

私は勝利8に取り組んでいます、このコードを使ってください。それはIEやFF、Operaなどで動作します。

あなたのttfフォントを以前woffに変換するにはここ に行ってください 。

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
1
Arnold