画像、 Flash、またはその他のグラフィックを使用せずに、Web サイトにカスタム フォントを追加する方法はありますか?
たとえば、私は結婚式の Web サイトに取り組んでいましたが、そのテーマに適したフォントをたくさん見つけました。しかし、そのフォントをサーバーに追加する正しい方法が見つかりません。また、そのフォントを CSS とともに HTML に含めるにはどうすればよいですか? グラフィックなしでこれを行うことは可能ですか？
920197 次
19 に答える
531
これは CSS を介して行うことができます。
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
TrueType-Fonts (TTF)、Web Open Font Format (WOFF)、または Embedded Opentype (EOT) を使用する場合、すべての通常のブラウザーでサポートされます。
于 2008-09-20T11:35:52.630 に答える
130
Google Web Fontsからいくつかのフォントを追加できます。
技術的には、フォントは Google でホストされており、HTML ヘッダーでそれらをリンクします。次に、それらを CSS で自由に使用できます@font-face(詳細をお読みください)。
例えば：
セクション<head>:
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
次にCSSで：
h1 { font-family: 'Droid Sans', arial, serif; }
このソリューションはかなり信頼できるようです ( Smashing Magazine でさえ記事のタイトルに使用しています)。ただし、これまでGoogle Font Directoryで利用できるフォントはそれほど多くありません。
于 2010-06-28T07:08:22.847 に答える
81
その方法は、@font-face CSS 宣言を使用することです。これにより、作成者はオンライン フォントを指定して Web ページにテキストを表示できます。作成者が独自のフォントを提供できるようにすることで、@font-face は、ユーザーがコンピューターにインストールした限られた数のフォントに依存する必要をなくします。
次の表を見てください。
ご覧のとおり、主にブラウザー間の互換性のために、知っておく必要のある形式がいくつかあります。モバイル デバイスでのシナリオは、それほど違いはありません。
ソリューション:
1 - 完全なブラウザー互換性
これは、現時点で最もサポートが充実している方法です。
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - ほとんどのブラウザ
ただし、状況はWOFFに大きくシフトしているため、おそらく次の方法で回避できます。
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - 最新のブラウザのみ
またはWOFFだけでも。
次に、次のように使用します。
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
参考文献と参考資料:
これは主に、この機能の実装について知っておく必要があることです。この件についてさらに調査したい場合は、次のリソースを参照することをお勧めします。私がここに置いたもののほとんどは、以下から抽出されたものです
于 2014-03-30T01:00:32.680 に答える
18
非標準フォントとは、標準形式のカスタム フォントを意味する場合、これが私が行う方法であり、これまでに確認したすべてのブラウザーで機能します。
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
したがって、ttf フォントと eot フォントの両方が必要になります。オンラインで入手できるツールの中には、変換を行うことができるものがあります。
ただし、非標準形式 (ビットマップなど) のフォントを添付したい場合は、お手伝いできません。
于 2012-09-12T15:30:55.233 に答える
12
Web サイトで非標準フォントを使用する最も簡単な方法は、sIFRを使用することです。
フォントを含む Flash オブジェクトを使用する必要がありますが、Flash がインストールされていない場合は、標準のテキスト/フォントにうまく劣化します。
スタイルは CSS で設定され、JavaScript はテキストの Flash 置換を設定します。
編集：（sIFRはプロジェクトに時間を追加し、メンテナンスが必要になる可能性があるため、非標準フォントの画像を使用することをお勧めします）.
于 2008-09-20T11:35:01.243 に答える
11
Font-face in IE: Making Web Fonts Workという記事には、3 つの主要なブラウザーすべてで動作すると書かれています。
ここに私が働いたサンプルがあります: http://brendanjerwin.com/test_font.html
詳細な議論はEmbedding Fontsにあります。
于 2009-02-25T22:56:00.223 に答える
10
Typeface.jsとCufonは、その他の 2 つの興味深いオプションです。これらは、Internet Explorer を除くすべての新しいブラウザーの新しい <canvas> 要素と Internet Explorer のVMLを介して、JSON 形式 (Web サイトでTrueTypeまたはOpenType形式から変換できる) で特別なフォント データをレンダリングする JavaScript コンポーネントです。
(現時点では) 両方の主な問題は、テキストの選択が機能しないか、少なくとも非常にぎこちなくしか機能しないことです。
それでも、見出しにはとてもいいです。本文…わかりません。
そして驚くほど速いです。
于 2009-05-11T16:59:25.663 に答える
8
または、 sIFRを試すこともできます。Flash を使用していることは知っていますが、利用可能な場合のみです。Flash を使用できない場合は、元のテキストが元の (CSS) フォントで表示されます。
于 2008-09-20T11:33:07.177 に答える
4
これを行うために W3C が推奨している手法は「埋め込み」と呼ばれ、次の 3 つの記事で詳しく説明されています: Embedding Fonts。私の限られた実験では、このプロセスはエラーが発生しやすく、マルチブラウザ環境で機能させることに成功していませんでした。
于 2008-09-20T11:39:19.423 に答える
4
Safari と Internet Explorer はどちらも CSS @font-face ルールをサポートしていますが、2 つの異なる埋め込みフォント タイプをサポートしています。Firefox は、近いうちに Apple と同じタイプをサポートする予定です。SVG はフォントを埋め込むことができますが、まだ広くサポートされていません (プラグインなし)。
私が見た中で最も移植性の高い解決策は、JavaScript 関数を使用して、見出しなどを、選択したフォントで生成され、サーバーにキャッシュされた画像に置き換えることです。この方法では、テキストを更新するだけで、 Photoshopでいろいろ。
于 2008-09-20T11:43:39.770 に答える
4
ASP.NET を使用している場合は、次のコマンドを使用してサーバーにフォントを実際にインストールする必要なく (インストールされているフォント ベースに追加する場合など)、イメージ ベースのフォントを簡単に生成できます。
PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];
次に、そのフォントを使用してGraphics.
于 2008-09-20T11:47:23.943 に答える
3
Internet Explorer でのみ動作するように見えますが、「html 埋め込みフォント」を Google ですばやく検索すると、http://www.spoono.com/html/tutorials/tutorial.php? id=19 が表示されます。
プラットフォームにとらわれないようにしたい場合 (そうするべきです!)、画像を使用するか、標準のフォントを使用する必要があります。
于 2008-09-20T11:39:12.170 に答える
3
少し調べて、Dynamic Text Replacement (2004-06-15 公開) を掘り下げました。
この手法は画像を使用しますが、「ハンズフリー」のように見えます。テキストを書くと、いくつかの自動化されたスクリプトがその場でページ上で自動化された検索と置換を実行できるようになります。
いくつかの制限がありますが、おそらく、これまでに見た他のすべてのツールよりも簡単な選択肢の 1 つです (そして、ブラウザーとの互換性がより高い)。
于 2008-09-20T11:52:07.223 に答える
3
このような実際のフォントへのリンクを提供するだけで、準備完了です
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
于 2017-11-11T16:11:09.610 に答える
2
別の方法については、記事「美しいWebタイポグラフィに役立つ50のデザインツール」を参照してください。
私はCufonのみを使用しました。私はそれが信頼できて非常に使いやすいと思ったので、私はそれに固執しました。
于 2010-04-06T05:06:59.530 に答える
2
Typeface.js JavaScriptの方法：
typeface.jsを使用すると、Webページにカスタムフォントを埋め込むことができるため、画像にテキストをレンダリングする必要がありません。
画像を作成したり、フラッシュを使用してサイトのグラフィックテキストを必要なフォントで表示したりする代わりに、訪問者がフォントをローカルにインストールしたかのように、typeface.jsを使用してプレーンなHTMLとCSSで書き込むことができます。
于 2010-05-31T03:35:45.137 に答える
2
フォントのファイルがある場合は、他のブラウザ用にそのフォントのフォーマットを追加する必要があります。
この目的のために、Fontsquirrelのようなフォント ジェネレーターを使用します。これは、すべてのフォント フォーマットとその @font-face CSS を提供します。CSS ファイルにドラッグ アンド ドロップするだけで済みます。
于 2016-02-11T05:37:36.453 に答える