web-dev-qa-db-ja.com

HTMLサイトにカスタムフォントをインストールする方法

私はフラッシュやphpを使用していません - そして私は簡単なHTMLレイアウトにカスタムフォントを追加するよう求められました。 "KG June Bug"

私はそれをローカルにダウンロードしました - これを達成するための簡単なCSSトリックはありますか？

htmlcssfontswebfonts
137
adam

はい、@ font-faceという名前のCSS機能を使用できます。これはCSS 3で正式に承認されただけですが、CSS 2で提案され実装されており、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>

そして、あなたはちょうどhtmlファイルと同じ場所にJUNEBUG.TFFを置く必要があります。

私は dafont.com のウェブサイトからフォントをダウンロードしました：

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

243
Nicolas Modrzyk

最近のほとんどのブラウザでは@ font-faceを使用できます。

これがどのように機能するかについてのいくつかの記事があります：

アプリにフォントを追加するための良い構文は次のとおりです。

これは、@ font-faceで使用するためにフォントを変換するための場所です。

あなたがfont-faceを使いたくないのであれば、cufonも動作します、そしてそれはウェブサイト上で良いドキュメントを持っています：

16
nheinrich

ブラウザを最大限にサポートするために、CSSコードは次のようになります。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

詳しくは、 @ font-face を で使用するを参照してください。 .com .

14
John Slegers

これを試して

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
 <div class="FontMarket">KhonKaen Market</div>

vilis.org

7
siamwebsite.me

外部スタイルシートを使用している場合、コードは次のようになります。

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

そして別の.cssファイル（例えばstyles.css）に保存されるべきです。 .cssファイルがページコードとは別の場所にある場合、実際のフォントファイルは.htmlや.phpのWebページファイルではなく、.cssファイルと同じパスを持つ必要があります。その場合、Webページには次のようなものが必要です。

<link rel="stylesheet" href="css/styles.css">

htmlページの<head>セクションにあります。この例では、フォントファイルはスタイルシートと一緒にcssフォルダーにあります。その後、htmlのタグ内にclass = "junebug"を追加するだけで、その要素でJunebugフォントを使用できます。

実際のWebページにCSSを配置する場合は、次のようにHTMLの先頭にスタイルタグを追加します。

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

そして実際の要素スタイルは、上記の<style>に含まれていて、クラスまたはidによって要素ごとに呼び出されるか、単に要素とインラインでスタイルを宣言することができます。要素とは、<div>、<p>、<h1>、またはJunebugフォントを使用する必要があるHTML内の他の要素を意味します。これらのオプションの両方で、フォントファイル（Junebug.ttf）はhtmlページと同じパスに配置されるべきです。これら2つの選択肢のうち、ベストプラクティスは次のようになります。

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

そして

<h1 class="junebug">This is Junebug</h1>

そして最も受け入れられない方法は次のようになります。

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

そして

<h1 style="font-family: Junebug;">This is Junebug</h1>

インラインスタイルを使用するのが良くない理由は、ベストプラクティスであり、スタイルはすべて1か所に収める必要があるため、編集は実用的です。これが、外部スタイルシートを使用するという最初の選択肢の使用をお勧めする主な理由でもあります。これが役に立つことを願っています。

2
Richard Stitz