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


153

私はフラッシュやphpを使用していません-シンプルなHTMLレイアウトにカスタムフォントを追加するように求められました。「KGジューンバグ」

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

回答:


276

はい、@ 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.comの Webサイトからフォントをダウンロードしました。

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


1
「宿題」だとすみません、このJUNEBUGフォントをプレーンテキストだけに使用すると、コードはどのようになりますか
adam

あなたがそれができるとは知りませんでした。他のブラウザでも動作しますか?
ジュリアンブルドン

1
適切なブラウザで動作します:webfonts.info/wiki/index.php?title
Nicolas Modrzyk

フォントが私のphpページと同じフォルダーにあります。
ブラック

1
で指定された@Blackパスurlは、CSSファイルがある場所を基準にしています。
Alex Semeniuk 2017

17

可能な限り最高のブラウザサポートを得るには、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;
}

詳細情報については、記事を参照して、フォントフェイス@使用CSS-tricks.comを


17

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

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

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

@ font-faceで使用するためにフォントを変換する場所がいくつかあります。

また、font-faceを使用したくない場合でもcufonは機能し、Webサイトに適切なドキュメントがあります。


9

これを試して

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

vilis.org


4

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

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

また、別の.cssファイル(たとえば、styles.css)に保存する必要があります。.cssファイルがページコードとは別の場所にある場合、実際のフォントファイルは、.cssファイルと同じパスである必要があります。.htmlまたは.php Webページファイルではありません。次に、Webページには次のようなものが必要です。

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

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

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

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

また、実際の要素のスタイルは上記に含まれ、<style>クラスまたはIDによって要素ごとに呼び出されるか、または要素にインラインでスタイルを宣言することができます。要素とは、Junebugフォントを使用する必要があるHTML内の<div>、<p>、<h1>またはその他の要素を意味します。これらのオプションの両方で、フォントファイル(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か所に保持して編集を実用的にすることです。これは、外部スタイルシートを使用する最初のオプションを使用することをお勧めする主な理由でもあります。これがお役に立てば幸いです。


-1

これを行う簡単な方法があります:htmlファイルに追加:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

注:使用している.ttfファイルの名前を入力します。次に、cssファイルに移動して、次を追加します。

h1 {
    color: blue;
    font-family: vermin vibes;
}

注:使用しているフォントのフォントファミリー名を入力します。

注:font.ttf名としてfont-family名を記述しないでください。font.ttf名が「vermin_vibes.ttf」の場合、font-familyは次のようになります。「vermin vibes」フォントファミリーには特別な文字が含まれていません「-、_」などのように、スペースのみを含めることができます。


font-facettfファイルを要求する代わりに、CSSで実際にそれを定義する必要があります。
Arcath

あなたは、単に私は常に2つの方法との両方の作品でそれを行う。このようにそれを行うことができそうする必要はありません
Abbass Sharara

@Arcathなぜfont-faceを使用する方が良いですか?
Antonio Araujo
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.