Webフォントの使い方

Sep 15, 2025

操作方法

以下は、Bram SteinのWebfontハンドブックから取られた抜粋です。 ここで購入してください 。

ウェブフォント CSSで定義されています @フォントフェイス ルール。あなたがWeb開発者であれば、あなたは最もおそらく書かれて、コピーされ貼り付け、または少なくとも見た @フォントフェイス ルール。

ただし、完全性のために、基本的な例をすばやく実行しましょう。

 @フォント面{
  フォントファミリー：ELENA;
  SRC：URL（ELENA-REGALES.WOFF）;

これにより、参照できる新しいWebフォントファミリが作成されます。 フォントファミリー または フォント 短距離プロパティ。しかし、ここで何かが足りません。フォントスタック内のWebフォントを参照するときは、Webフォントがロードできない場合に必ず少なくとも1つのフォールバックフォントを含めてください。

ここでは、ELENAがロードできない場合、ブラウザは一般的なものに戻ります セリフ フォントファミリー：

 P {
  フォントファミリー：Elena、Serif。

フォールバックフォントにはもっとありますが、今のところ、ジェネリックのみを含めることで、フォントスタックを簡単に保ちましょう。 セリフ そして サンセリフ フォントファミリー。

フォントファミリー

複数のスタイルを持つフォントファミリを作成することは、 @フォントフェイス 各スタイルのルールと同じものを使用しています フォントファミリー 名前。以下 @フォントフェイス ルールは、通常の太字のスタイルで家族を作成します。

 @フォント面{
     フォントファミリー：ELENA;
     SRC：URL（ELENA-REGALES.WOFF）;
     フォントウェイト：通常;
}
   @フォント面{
     フォントファミリー：ELENA;
     SRC：URL（elena-bold.woff）;
     フォントウェイト：太字;

あなたはあなたのセレクタの姓と体重を参照することによってあなたのCSSでこのフォントファミリーを使うことができます。これは段落と太字のスタイルに通常のスタイルを適用します強い段落：

 P {
  フォントファミリー：Elena、Serif。
}

p強い{
  フォントウェイト：太字;

それ以外に フォント - ウェイト 、 @フォントフェイス それを受け入れます フォントスタイル そして フォントストレッチ イタリック体や凝縮などのスタイルを定義するプロパティ記述子。 3つのプロパティ記述子すべてを使用して、複数のスタイルを持つ単一のフォントファミリを作成できます。理論的には、これはあなたが243個の個々のスタイルを含む家族を作成することを可能にします（9 フォント - ウェイト 値×3 フォントスタイル 値×9 フォントストレッチ 値）。

しかし実際には、ブラウザ一部のブラウザがサポートしていないため、27の値に制限されています。 フォントストレッチ 。どのブラウザを使用できるかを確認するには、下の表を見てください。ここにより詳細な情報については。

Click the icon in the top right to enlarge the image — 右上のアイコンをクリックして画像を拡大する

運を着た、残りのブラウザはを実装します フォントストレッチ すぐに財産、そしてあなたは243のフォント分類すべてを使うことができるでしょう。

フォントフォーマット

the SRC 記述子フォントファイルを取得するためのブラウザに指示します。前の例では単一のフォントフォーマットを使用しましたが、URLを使用しているフォーマットのヒントと組み合わせて複数のフォントフォーマットを組み合わせたURLが表示されることがよくあります。 フォーマット（ "value"） 構文。

フォーマットヒント指定されたURLのフォントファイルのフォーマットがどのようなものであるかをブラウザに指示します。

 @フォント面{
  フォントファミリー：ELENA;
  SRC：URL（ELENA-REGALE.WOFF2）フォーマット（ "WOFF2"）
       URL（ELENA-REGURESOFF）フォーマット（ "WOFF"）;

複数のフォーマットを一覧表示すると、モダンなブラウザはフォーマットヒントに基づいてサポートしている最初のフォーマットを選択します。したがって、最低圧縮の順序でWebフォントフォーマットをリストすることが重要です。

フォーマットのヒントはオプションであっても、常にそれらを含めます - フォントをダウンロードする必要なしにブラウザにフォーマットについて知らせることができます。たとえば、ブラウザがWOFF2をサポートしていないがWOFFをサポートしていない場合、フォーマットヒントに基づいてWOFF2フォントファイルをスキップできます。

ブラウザは、OpenType（TrueType）、EOT、WOFF、およびWOFF2のいくつかのWebフォントフォーマットをサポートしています。いくつかのブラウザもSVGフォントをサポートしていますが、彼らは推奨されていないため、使用されなくなってはいけません（そしてそれと混同しないでください）新しいOpenType-SVG形式）。

eot、woff、およびwoff2は技術的にはフォントフォーマットではありません。それらは、さまざまな程度の圧縮を持つ圧縮されたOpenTypeファイルです。 WOFF2は最高の圧縮を提供し、続いてWOFFとEOTを提供します。

すべてのブラウザのカバレッジを調査する際に、あなたは言った何かに渡って来たかもしれません弾丸 @フォントフェイス 構文フォンスプリングによって。

BulletProof Syntaxは、最大ブラウザのカバレッジのために、eot、woff2、woff、raw opentype、およびsvgフォントファイルを使用します。

 @フォント面{
  フォントファミリー：ELENA;
  SRC：URL（elena.eot？#iefix）フォーマット（ "embedded-opentype"）
       URL（ELENA.WOFF2）フォーマット（ "WOFF2"）、
       URL（ELENA.WOFF）フォーマット（ "WOFF"）、
       URL（elena.otf）フォーマット（ "OpenType"）、
       URL（ELENA.SVG＃ELENA）フォーマット（ "SVG"）;

最初のURL行はあなたに少し奇妙に見えるかもしれません。 Internet Explorer 8以降のバージョンは、複数のフォントフォーマットの構文をサポートし、その全体の値を扱いません。 SRC URLとしてプロパティ。

弾丸の構文はInternet Explorer 8以降をトリックし、残りのURLは最初のURLのフラグメント識別子の一部であると考えています。ファイルをダウンロードするときにフラグメント識別子は無視されます.Internet Explorer 8以外は単に最初のURLを使用します。

Internet Explorer以外のブラウザは、EOTをサポートしていないため、行をスキップします。

残りのエントリはあなたが期待するものです：好みの順序でリストされているフォントフォーマット。

しかし、弾丸の構文はまだ関連性がありますか？いいえ。実際には、それは有害だと思います。 SVGフォントは非推奨で、使用中のブラウザによってのみサポートされています。

ほとんどのWebサイトはInternet Explorer 9以降をサポートしていますが、構文は最初の優先フォントフォーマットとしてEOTをリストします。 Internet Explorer 9以降のサポートWOFFは、まだ最初にリストされているという理由だけで、それらのバージョンは依然としてEOTファイルをダウンロードします。

ほとんどのWebサイトは古いブラウザをサポートしなくなったため、簡易構文を使用することを強くお勧めします。この単純化された構文は、Android 4.4以前のような積極的に使用されている最新のブラウザのすべてのすべてをカバーしています。

 @フォント面{
  フォントファミリー：ELENA;
  SRC：URL（ELENA.WOFF2）フォーマット（「WOFF2」）、
       URL（ELENA.WOFF）フォーマット（ "WOFF"）、
       URL（elena.otf）フォーマット（ "OpenType"）;

古いAndroidバージョンがまだ使用されていても、これらのブラウザへの世界的な依存は急速に減少しています。すぐにあなたはおそらく生のOpenType形式をドロップすることもできるでしょう、そしてさらに構文を単純化します：

 @フォント面{
  フォントファミリー：ELENA;
  SRC：URL（ELENA.WOFF2）フォーマット（「WOFF2」）、
       URL（ELENA.WOFF）フォーマット（ "WOFF"）;

この場合、古いブラウザを実行している人は、Webフォントの代わりにフォールバックフォントを表示します。それはいいです;フォールバックフォントでコンテンツを読むことができます。

の可能性のある値があります SRC ディスクリプタ。 the 地元関数はローカルフォントファミリの名前を取ります。フォントがシステムにインストールされた場合、ブラウザは代わりにそれを使用して追加のダウンロードを避けます。

 @フォント面{
  フォントファミリー：ELENA;
  SRC：ローカル（ "Elena"）、
       URL（ELENA-REGALER.WOFF2）フォーマット（ "WOFF2"）、
       URL（ELENA-REGURESOFF）フォーマット（ "WOFF"）;

これは素晴らしい最適化のように思えるかもしれませんが、ローカルフォントがあなたのWebフォントと一致することを理解するものは何もありません。

あなたは異なるバージョンのフォント、さまざまな言語サポートを持つフォント、さらにはまったく異なるフォントを得ることができます。そのため、私は通常使用しないことをお勧めします地元これらのダウンサンプライドが許容できると認めない限り機能。

これはBram Stein'sからの抜粋です ウェブフォントハンドブック 、本から離れて。その中で、彼はWebフォントを選択するときに考慮すべきもの、それらを効果的に使用する方法、およびパフォーマンスを最適化する方法を探ります。

関連記事：

地獄はブロックチェーンですか？
WebデザイナーとDEVSの30 Chrome Extensions
20素晴らしい無料のGoogle Webフォント

Webフォントの使い方

フォントファミリー

フォントフォーマット

操作方法 - 最も人気のある記事

人を描く方法

Photoshopで昼夜を変える方法

マンガクラシックを再現する

V-Rayを使って木の木を散布する

PhotoshopでのSCI-Fiゲームの設定をする

あなたのキャラクターが色と光でポップします

スケーラブルな応答コンポーネントを構築する

2Dから3Dのベクトルのロゴを取る方法

カテゴリ