HTMLサイトにカスタムフォントをインストールするにはどうすればいいですか?質問する

HTMLサイトにカスタムフォントをインストールするにはどうすればいいですか?質問する

私はフラッシュや PHP を使用していませんが、シンプルな HTML レイアウトにカスタム フォントを追加するように依頼されました。「KG June Bug」

ローカルにダウンロードしました。これを実現するための簡単な CSS トリックはありますか?

ベストアンサー1

はい、@font-face という CSS 機能を使用できます。これは CSS3 でのみ正式に承認されていますが、CSS2 で提案および実装されており、IE ではかなり長い間サポートされてきました。

CSS で次のように宣言します。

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

その後は、他の標準フォントと同じように参照できます。

 h3 { font-family: Delicious, sans-serif; }

つまり、この場合、

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

JUNEBUG.TFF を html ファイルと同じ場所に置くだけです。

フォントはdafont.comWebサイト:

http://www.dafont.com/junebug.font

おすすめ記事