🧖🏽 👩‍👩‍👧 👌🏼 @ font-faceの細かいフォント 🚑 🌇 🖕

Firefox 3.0はフォントの表示を改善し、カーニング、合字、さまざまな太さのサポート、複雑なスタイルの表示のサポートを導入しましたが、それにもかかわらず、著者はデザインで公開されているフォントの使用を制限していました。 Firefox 3.5は、 @ font-face CSSルールのサポートを導入することでこの制限を取り除きました。これは、コードとイラストが添付されるのと同じ方法でTrueTypeおよびOpenTypeフォントを添付する方法です。 Safariブラウザーは、バージョン3.1以降のフォントでこのタイプのハイパーリンクをサポートしており、OperaはOpera 10でのサポートを計画していることを発表しました。

フォントとのハイパーリンクに@ font-faceを使用するのは比較的簡単です。スタイルファイル内で、各@ font-faceプロパティは、使用するフォントファミリ名、ロードするフォントリソース、および特定のスタイルのスタイル特性（太字か斜体かなど）を指定します。 Firefox 3.5は必要な場合にのみフォントをダウンロードするため、スタイルファイルは完全なフォントセットを指定できますが、実際にはそのうちのいくつかが選択的に使用されます。

/* Graublau Sans Web (www.fonts.info) */ @font-face { font-family: Graublau Sans Web; src: url(GraublauWeb.otf) format("opentype"); } body { font-family: Graublau Sans Web, Lucida Grande, sans-serif; }

@ font-faceをサポートするブラウザーはGraublau Sans Webを使用してテキストを表示しますが、古いブラウザーはLucida Grandeまたはsans-serifのデフォルトスタイルを使用してテキストを表示します。以下に例を示します。

もう少し掘り下げます

現在、ほとんどのフォントファミリは、レギュラー、ボールド、イタリック、ボールドイタリックの4つのフェースのみで構成されています。これらの各スタイルを定義するには、 font-weight およびfont-style記述子が使用されます。アウトラインのスタイルを定義します。カスケードと継承の原則はここでは適用されません。明示的に設定されていない場合、それぞれがデフォルトの「通常」になります。

 /* Gentium by SIL International */ /* http://scripts.sil.org/gentium */ @font-face { font-family: Gentium; src: url(Gentium.ttf); /* font-weight, font-style ==>   normal */ } @font-face { font-family: Gentium; src: url(GentiumItalic.ttf); font-style: italic; } body { font-family: Gentium, Times New Roman, serif; }

このフォントファミリを使用して表示される例のテキストを以下に示します。

見落としやすい機能があります。 @ font-faceを使用すると、通常の太字よりも多くの顔を持つファミリーを作成できます。単一のファミリー内で最大9つの脂肪含有量を定義できます。これは、プラットフォームの内部の欠陥が通常フォントファミリを通常の太字の太字の値に制限するWindowsにも当てはまります。日本のプロジェクトM + Fonts （オープンソース）などの既存のフォントには、最大7つの太字があります。例として、それらを選択します。

状況によっては、作成者は、読者がローカルで使用できるフォントを使用し、対応するスタイルが使用できない場合にのみフォントをダウンロードすることを好む場合があります。これは、 @ font-faceルールで「src」記述子を指定するときに「local（）」を使用する場合に可能です。ブラウザーは、目的のフォントを正常にダウンロードするまで、「src」記述子からフォントリストの要素を順番に試します。

 /* MgOpen Moderna */ /* http://www.zvr.gr/typo/mgopen/index */ @font-face { font-family: MyHelvetica; src: local("Helvetica Neue"), local("HelveticaNeue"), url(MgOpenModernaRegular.ttf); } @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } body { font-family: MyHelvetica, sans-serif; }

上記で定義したフォントファミリを使用した簡単な例の Mac OS X、Windows、およびLinuxのトップダウン表示結果を示すスクリーンショットは次のとおりです。

フォントファミリHelvetica Neueは、ほとんどのMac OS Xシステムで使用できますが、通常はWindowsおよびLinuxマシンでは使用できません。この例をMac OS Xで表示すると、Helvetica Neueローカルスタイルが使用され、フォントはダウンロードされません。 WindowsおよびLinuxでは、ローカルフォントのロードに失敗し、代わりにワイルドカードフォント（MgOpen Moderna）がダウンロードされて使用されます。 MgOpen ModernaはHelveticaの代替として計画されていたため、Helvetica Neueに似ています。このようにして、作成者はテキストの希望の外観を提供できますが、必要がない場合はフォントをダウンロードしないでください。

特定のフォントスタイルを参照するために使用される名前は、個々のフォントの完全な名前です。これは通常、家族の名前にスタイルの名前を加えたものです（たとえば、「Helvetica Bold」）。 Mac OS Xでは、指定されたスタイルのダッシュボードに名前が表示されます。 1つのスタイルを選択し、FontBookの「プレビュー」メニューから「フォント情報を表示」を選択します。

Linuxにも同様のツールが存在します。 Windowsでは、これらの名前を表示するための無料のMicrosoftダウンロードツールであるfont property extensionを使用します。拡張機能がインストールされると、プロパティパネルに個々のフォントに関する情報が表示されます。フルネームは、「名前」タブで「フォント名」として示されます。

Mac OS XのSafariは、PostScript名による検索のみをサポートしているため、Mac OS XのPostscript名もサポートされています。 OpenType PSフォント（通常は.otf拡張子が付いています）の場合、フルネームはWindowsのポストスクリプト名と同じです。そのため、これらのフォントの場合、著者はフルネームとポストスクリプトの両方を指定することをお勧めします。これにより、クロスプラットフォームのパフォーマンスを実現できます。

多言語サポート

多くの言語は、公開されているフォントの不足に苦しんでいます。少数派の方言や古代のスタイルの場合、選択は文字通り一握りに狭められます。 @ font-faceを使用すると、そのような言語を使用する作成者は、フォントをページに接続することで物事を改善できます。

 @font-face { font-family: Scheherazade; src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(fonts/ScheherazadeRegOT.ttf) format("opentype"); } body { font-family: Scheherazade, serif; }

アラビア語などの言語では、テキストの形状を変更する必要があります。テキストの周囲の文字は、特定の文字の表示に影響します。プラットフォームごとに異なるレンダリングテクノロジーを使用して、テキストの形状を変更できるようにします。 Mac OS XではAATフォントが必要ですが、WindowsおよびLinuxではOpenTypeフォントが必要です。このプラットフォームで必要な形式のフォントがない場合、テキストの形状を変更しても正しく表示されません。

Mac OS Xでは、 AATバージョンのフォントがダウンロードされます。 AATフォントでのレンダリングがサポートされていないWindowsおよびLinuxでは、 AATフォントのダウンロードはスキップされ、代わりにOpenTypeフォントが使用されます。したがって、テキストはすべてのプラットフォームで正しく表示されます。

クロスサイトフォントの使用

デフォルトでは、Firefox 3.5では、同じサイトから受信したページに対してのみフォントをダウンロードできます。これにより、サイトが他のサイトにあるフォントを無料および無料で使用できなくなります。クロスサイトフォント共有（たとえば、オンラインフォントライブラリ）を明確に許可したいサイトでは、Firefox 3.5はこの動作を制御するアクセス制御ヘッダーの使用をサポートしています。フォントファイルと共に送信されるHTTPヘッダーに追加のヘッダーを追加することにより、サイトはクロスサイト使用を可能にします。

 #  .htaccess- Apache      <FilesMatch "\.(ttf|otf)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

このHTTPヘッダーを有効にすると、同じサイトのページだけでなく、すべてのページがこのサイトのフォントにアクセスできます。

フォントのライセンスの問題

サイトでフォントが使用される場合、フォントライセンスがサイトでの使用を許可していることを確認することが常に重要です。使用許諾契約があいまいな法的条件に満ちている場合は、サイトでフォントを使用する前にフォントプロバイダーに確認してください。ライセンスで使用が許可されている場合は、将来の参照用にライセンスを示す@ font-faceルールの近くにコメントを追加すると便利です。

「無料のフォントを見つけました。自分のサイトで使用できますか？」

たぶん; そして多分そうではない。一部の無料のフォントは、プロモーション用の招待製品として（購入を促すために）配布されます。また、独自に配布したり、Web上のサーバーに置いたりすることはできません。無料のフォントであっても、ライセンスを確認してください。

「私のサイトで[ここにお気に入りのフォントの名前を挿入]を使いたいだけです。 それは可能ですか？」

おそらく今はそうではありません。 Webでのフックフォントの使用は、ほとんど始まっていません。現在、独自のオペレーティングシステムに付属しているほとんどのフォントには、標準デスクトップアプリケーションへの使用を制限するライセンスがあるため、これらのフォントをWebサーバーにダウンロードすることはほぼ間違いなく許可されていません。過去には、フォントの作成には著作権侵害が非常に必要でした。そのため、ほとんどのフォントメーカーは、比較的限られたコンテキスト以外でフォントを使用できるようにすることに慎重です。多くのフォントプロバイダーは、印刷業界のニーズに焦点を合わせており、多くの場合、ライセンスの相対的な複雑さを反映しています。将来、一部のフォントデザイナーは、フォントをWebフォントとして販売することにより、著作権侵害による販売への潜在的な損害を上回るという結論に達するかもしれませんが、他の人はそのような結論に至らないかもしれません。ライセンス契約はその選択を反映し、敬意を持って扱われるべきです。

写真販売市場は20億ドル市場と呼ばれることが多く、Webフォント市場はまだゼロに近いため、成長しかできません。

Internet Explorerのフォントフック

Internet Explorerではフォントのフックが長い間可能ですが、独自のEOTフォント形式のフォントのみです。 EOTフォントを作成する唯一の方法は、Windowsでのみ使用可能なMicrosoft WEFTツールを使用することです。 TrueTypeおよびOpenType TTフォントのみをEOT形式に変換でき、 OpenType PS（.otf）フォントは使用できません。

@ font-faceルールでは、Internet Explorerはfont-familyおよびsrc記述子のみを受け入れるため、各ファミリには1つのスタイルのみを含めることができます。 format（）ディレクティブを理解せず、そのようなディレクティブを含む@ font-faceルールを無視します。この動作は、クロスプラットフォームでのフォントフックを有効にするために使用できます。

 /*    Internet Explorer */ /* (**  ) */ @font-face { font-family: Gentium; src: url(Gentium.eot) /*   format() */; } /*      */ @font-face { font-family: Gentium; src: url(Gentium.ttf) format("opentype"); }

今後の仕事

Firefox 3.5では、 font-stretchおよびunicode-range記述子はサポートされていません。 SVGドキュメントで定義されたフォントもまだサポートされていません。 Firefoxの将来のリリースでの導入について検討します。いつものように、パッチは大歓迎です！

さらに読むために

ドキュメント

例

フォントリソース

フォントポリシー

@ font-faceの細かいフォント