web-dev-qa-db-ja.com

外部フォントをHTMLドキュメントに読み込むにはどうすればよいですか？

外部フォントファイルをHTMLドキュメントに読み込む方法を教えてください。

例：テキスト "blah blah blah blah blah blah blah blah blah"を、HTML CSSおよび/またはJAVASCRIPTを使用して、同じディレクトリ内のTTFファイルからのカスタムフォントにする

htmlfonts
57
Eric

これをご覧ください A List Apart article 。適切なCSSは次のとおりです。

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

上記はChrome/Safari/FireFoxで動作します。 Paul D. Waiteがコメントで指摘したように、IEをフォントを EOT形式 に変換すると動作するようになります。

幸いなことに、これは古いブラウザでは正常に低下するように見えるため、すべてのユーザーに同じフォントが表示されるわけではないという事実に気付き、快適であれば、使用しても安全です。

87
Chris Van Opstal

Paul Irishには、これを行う方法があり、一般的な問題のほとんどをカバーしています。彼の 防弾@ font-face記事 を参照してください。

IEによる不要なデータのダウンロードを停止し、IE8、Firefox、Opera、Safari、およびChromeで動作する最後のバリアントは次のようになります。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

彼はまた、フォントを必要なすべての形式に変換する generator にリンクしています。

他のユーザーが既に指定しているように、これは最新世代のブラウザーでのみ機能します。これをCufonなどと組み合わせて使用​​し、ブラウザが@font-faceをサポートしていない場合にのみCufonをロードするのが最善の策です。

19
Sean Vieira

CSS3は、@ font-faceルールを使用してこれを行う方法を提供します。

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

ここ は、@ font-faceルールをサポートしないブラウザーで機能するさまざまな方法です。

3
roflwaffle

Jay Stevensの回答について：「HTMLファイルで使用できるフォントは、ユーザーのマシンに存在し、Webブラウザーからアクセスできる必要があります。したがって、別の外部プロセスを介してユーザーのマシンにフォントを配布する場合を除き、できません。」それは本当だ。

しかし、javascript/canvas/flashを使用する別の方法があります-非常に良い解決策はcufonを与えます： http://cufon.shoqolate.com/generate/ 非常に使いやすい外部フォントメソッドを生成するライブラリ。

1
aviv

CSS3ファンシーよりも多くのブラウザーをサポートする場合は、オープンソースライブラリ cufon javascript library をご覧ください。

そしてここに API があります。もっとファンキーなことをしたいのなら。

Major Pro：必要なことを実行できます。

重大な短所：一部のブラウザーではテキスト選択が許可されないため、ヘッダーテキストでは使用が適切です（ただし、必要に応じてすべてのサイトで使用できます）。

1
jpabluz

Microsoftには、埋め込みフォントを含める独自のCSSメソッドがあります（ http://msdn.Microsoft.com/en-us/library/ms533034（VS.85）.aspx ）が、これはおそらくないはずですお勧めします。

sIFR を使用したことがあります。これは素晴らしいことです-JavascriptとFlashを使用して、通常のテキストを、希望するフォントの同じテキストを含むFlashに動的に置き換えます（フォントはFlashファイルに埋め込まれています） 。これはテキストの周りのマークアップには影響しません（CSSクラスを使用することで動作します）、テキストを選択することができ、ユーザーがFlashを持っていないか無効になっている場合、どのフォントのテキストにもスムーズに低下しますCSSで指定します（例：Arial）。

1
Graham Clark

Raphael.jsへの参照は表示されませんでした。だから私はそれをここに含めると思った。 Raphael.jsは、IE5、非常に初期のFirefox、およびその他のすべてのブラウザーとの下位互換性があります。可能な場合はSVGを使用し、不可能な場合はVMLを使用します。あなたがそれをどうするかは、キャンバスに描くことです。一部のブラウザでは、生成されるテキストを選択することさえできます。 Raphael.jsは次の場所にあります。

http://raphaeljs.com/

紙の描画領域を作成し、フォント、フォントの太さ、サイズなどを指定して、テキストの文字列を紙に配置するように指示するのと同じくらい簡単です。ライセンスの問題を回避するかどうかはわかりませんが、テキストを描画しているので、ライセンスの問題を回避することはかなり確実です。ただし、弁護士に確認してください。 :-)

0
Mark Manning

これを試して

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
0
Lead Developer