1. ホーム
  2. 質問と答え
  3. HTMLサイトにカスタムフォントをインストールするには

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

2011-11-01 10 views

答えて

208

はい、@ 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ウェブサイトからフォントをダウンロード：あなたは、最新のブラウザでフォントフェイス@使用することができます

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

出典

2011-11-01 02:03:02

+1

申し訳ありませんが、私はこのJUNEBUGフォントをプレーンテキストだけに使用した場合、コードがどのように見えるのでしょうか – adam

+0

私は答えを更新しました。ちなみに、すてきなフォント。 –

+0

私はあなたがそれをすることができるか分からなかった。それは他のブラウザでも機能しますか？ –

16

。

はここにそれがどのように機能するかについていくつかの記事です：ここで

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

出典

2011-11-01 02:07:20 nheinrich

10

、あなたの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で記事Using @font-faceを参照してください。htmlファイルの追加で ：

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

注

出典

2016-01-24 19:15:18

4

この

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

vilis.org

出典

2016-09-18 07:59:54

-1

これを行うための簡単な方法があるとしてみてくださいあなたは.ttfファイルの名前を入れますあなたは持っている。 は、CSSファイルにに移動し、追加します。

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

注：あなたが持っているフォントのフォントファミリ名を置きます。

注：フォントファミリ名をfont.ttfという名前にしないでください。 例：font.ttfの名前が "vermin_vibes.ttf"の場合、フォントファミリは "vermin vibes"フォントファミリになりません。特殊文字は " - 、_" ...などのように含まれていません。

出典

2017-10-10 08:25:02

+0

実際には、ttfファイルを必要とせずにCSSで 'font-face'として定義するべきです。 – Arcath

+0

そうする必要はありませんので、私はいつもそれを2通りの方法で行います –

1

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

@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ファイルと同じパスを持つ必要があります。あなたのhtmlページの<頭部>セクションで

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

：次に、Webページのような何かを必要とします。この例では、フォントファイルはスタイルシートと共に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ページと同じパスに配置する必要があります。

<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か所に保持するように指示するベストプラクティスです。これはまた、外部スタイルシートを使用する最初のオプションを使用することをお勧めする主な理由です。私はこれが役立つことを願っています

出典

2017-12-27 23:56:30

関連する問題

 関連する問題