非標準のフォントを Web サイトに追加するにはどうすればよいですか?

https://stackoverflow.com/questions/107936

01-07-2019
|

質問

画像を使用せずにウェブサイトにカスタムフォントを追加する方法はありますか? 閃光それとも他のグラフィック?

たとえば、結婚式の Web サイトで作業していて、そのテーマに適したフォントをたくさん見つけましたが、そのフォントをサーバーに追加する正しい方法が見つかりません。また、そのフォントを CSS に組み込むにはどうすればよいですか。 HTMLに？グラフィックなしでもこれは可能でしょうか？

解決

これは 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 フォント (TTF) または Web オープンフォントフォーマット (WOFF) を使用する場合。

他のヒント

いくつかのフォントを追加できます Googleウェブフォント.

技術的には、フォントは 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; }

この解決策は非常に信頼できるようです（たとえスマッシングマガジンでは記事タイトルに使用されています。）。ただし、これまでのところ利用できるフォントはそれほど多くありません。 Google フォントディレクトリ.

@font-face CSS 宣言を使用すると、作成者は Web ページにテキストを表示するオンラインフォントを指定できます。@font-face では、作成者が独自のフォントを提供できるようにすることで、ユーザーがコンピュータにインストールしている限られた数のフォントに依存する必要がなくなります。

次の表を見てください。

enter image description here

ご覧のとおり、主にブラウザ間の互換性のために、知っておく必要がある形式がいくつかあります。モバイルデバイスのシナリオもそれほど変わりません。

解決策:

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;
}

参考文献と詳細情報:

この機能の実装に関して知っておく必要があるのは主にこれです。このテーマについてさらに詳しく調べたい場合は、次のリソースを参照することをお勧めします。ここに載せた内容のほとんどは以下から抜粋したものです

標準以外のフォントが標準形式のカスタムフォントを意味する場合、私がそれを行う方法は次のとおりです。これは、これまでに確認したすべてのブラウザで機能します。

@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 フォントの両方だけです。オンラインで入手できる一部のツールでは変換を行うことができます。

ただし、標準以外の形式 (ビットマップなど) でフォントを添付したい場合は、私はお手伝いできません。

Web サイトに標準以外のフォントを使用する最も簡単な方法は、次の方法を使用することであることがわかりました。 sIFR

フォントを含む Flash オブジェクトの使用が必要ですが、Flash がインストールされていない場合は、標準のテキスト/フォントにうまく機能します。

スタイルは CSS で設定され、JavaScript によってテキストの Flash 置換が設定されます。

編集：(sIFR ではプロジェクトに時間がかかり、メンテナンスが必要になる可能性があるため、非標準フォントには画像を使用することをお勧めします)。

記事 IEのフォントフェイス:Web フォントを機能させる 3 つの主要なブラウザすべてで動作すると述べています。

これが私が動作したサンプルです: http://brendanjerwin.com/test_font.html

さらなる議論が行われています フォントの埋め込み.

書体.js そしてキュフォン他に 2 つの興味深いオプションがあります。これらは、特殊なフォントデータを JSON 形式でレンダリングする JavaScript コンポーネントです (JSON 形式から変換できます)。 TrueType または OpenType Internet Explorer を除くすべての新しいブラウザの新しい <canvas> 要素経由、および VML Internet Explorer で。

(現時点で) どちらの主な問題は、テキストの選択が機能しないか、少なくとも非常にぎこちなくしか機能しないことです。

それでも、見出しとしては非常に優れています。本文...わからない。

そしてそれは驚くほど速いです。

または、試してみることもできます sIFR. 。Flash が使用されていることは知っていますが、それは利用可能な場合に限ります。Flash が使用できない場合は、元のテキストが元の (CSS) フォントで表示されます。

...を使用せずにウェブサイトにカスタムフォントを追加する方法はありますか?閃光？

もちろん、使ってくださいシルバーライト.

これを行うために W3C が推奨している手法は「埋め込み」と呼ばれており、次の 3 つの記事で詳しく説明されています。フォントの埋め込み. 。私の限られた実験では、このプロセスはエラーを起こしやすいことがわかり、マルチブラウザ環境で機能させるには限られた成功しか得られませんでした。

Safari と Internet Explorer はどちらも CSS @font-face ルールをサポートしていますが、2 つの異なる埋め込みフォントタイプをサポートしています。Firefox は近いうちに Apple と同じタイプをサポートする予定です。SVG はフォントを埋め込むことができますが、まだそれほど広くサポートされていません (プラグインなし)。

私がこれまでに見た中で最も移植性の高い解決策は、JavaScript 関数を使用して見出しなどを置き換えることだと思います。選択したフォントを使用して画像が生成され、サーバー上にキャッシュされます。これにより、テキストを更新するだけで済み、Photoshop であれこれいじる必要がなくなります。

ASP.NET を使用する場合、次のコマンドを使用して、実際にサーバーにフォントをインストールする (インストールされているフォントベースに追加するなど) ことなく、イメージベースのフォントを生成するのが非常に簡単です。

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

そしてそのフォントを使って Graphics.

Internet Explorer でのみ動作するようですが、Google で「html embed fonts」を検索すると、次のような結果が得られます。 http://www.spoono.com/html/tutorials/tutorial.php?id=19

プラットフォームに依存しないようにしたい場合は (そうすべきです!)、画像を使用するか、標準フォントを使用する必要があります。

ちょっと調べて掘り出してみた 動的テキスト置換 (2004 年 6 月 15 日公開)。

このテクニックは画像を使用しますが、「ハンズフリー」であるように見えます。テキストを書くと、いくつかの自動スクリプトがその場でページ上で自動検索と置換を実行します。

いくつかの制限がありますが、これはおそらく私がこれまでに見た他のすべての選択肢よりも簡単な選択肢の 1 つです (そしてブラウザーとの互換性も高くなります)。

WOFF フォントを使用することも可能です - 例ここ

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

このように実際のフォントへのリンクを提供するだけで準備完了です

<!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>

Typeface.js JavaScript の方法:

theptface.jsを使用すると、Webページにカスタムフォントを埋め込むことができるため、テキストを画像にレンダリングする必要はありません

画像を作成したり、Flashを使用してサイトのグラフィックテキストを必要なフォントに表示する代わりに、inthepface.jsを使用して、訪問者がフォントをローカルにインストールしているかのように、プレーンHTMLとCSSで書くことができます。

http://typeface.neocracy.org/

Monotype は最近、多くのフォントと、それらを Web ページで使用するための新しいシステムをリリースしました。 http://www.webfonts.fonts.com/

記事を見る 美しい Web タイポグラフィーのための 50 の便利なデザインツール 代替方法については。

ただ使ったことがあるキュフォン. 。信頼性が高く、非常に使いやすいことがわかったので、ずっと使い続けています。

フォントのファイルがある場合は、他のブラウザ用にそのフォントの形式をさらに追加する必要があります。

この目的のために、私は次のようなフォントジェネレーターを使用しますフォントリスすべてのフォント形式とその @font-face CSS が提供されているため、CSS ファイルにドラッグアンドドロップするだけで済みます。

この場合、グラフィックスが唯一の選択肢だと思います。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow