岐路に立つWebフォント

翻訳は100％正確であると主張していませんが、著者の考えと音節を正確に伝えようとしました。 コメントを歓迎します。



1998年のInternet Explorer 4以降、2008年3月から2010年3月まで、「ビッグ5」デスクトップブラウザー（Safari、Firefox、Opera、Chrome）全体が1つずつ、 @font-face



ルールの比較的類似した実装を展開しました。 @font-face



をバインド@font-face



ための@font-face



。 同時に、Webの始まりから欠けていたWebパブリッシングパズルの不可欠な部分が代わりになり、実際のWeb指向のタイポグラフィが形になり始めています。



開始するには、最近のイベントのレビュー：

1. 2010年3月18日に、W3CでWeb Fonts Working Group が設立されました。 彼女の最初の仕事は、 sfnt （OTFおよびTTF）フォントを「圧縮」形式でWebに配信するための標準としてWOFF 仕様を承認することでした。
2. IE9 Platform PreviewでWindowsのDirectWriteを使用したIE9でのフォントのレンダリングが導入されました。
3. Font Squirrelの@ Font-Face GeneratorやEOTFASTなど、最初のWebフォント準備ツールが登場しました 。
4. 「フォントストレージ」の新しい波は、 Typekit 、 Typotheque 、および無料のオープンソースKernestの形で登場し ました 。
5. 商用フォントデザイナーによるWebフォントの最初の「信頼/クレジット」 ライセンスが登場しました。
6. CSS3 Fonts Moduleには 、OpenTypeの高度な機能の一部が含まれています。
7. Adobe Flashは、かつては信頼性の高いクロスプラットフォームのテキスト置換環境（sIFR）でしたが、今では完全に惨めに見えます。
8. Googleは、拡大するライブラリを備えた無料のフォントサービスを開始しました。 ライブラリ内のすべてのフォントは、プライベートストレージ/使用可能です。

それでは、ポイントを見ていきましょう...

ワフ

WOFFは、2010年4月8日にW3Cフォントワーキンググループに正式に追加されました。 マイクロソフトは、OperaおよびMozillaとともに、その導入を予期せず支援しました。 WOFFサポートは、開発者向けのIE9テストビルドで発表されています。 WOFF は 、フォントの「トランスポート」標準になります。 WOFFサポートはFirefox 3.6以降に既に実装されており、Chrome開発者は近い将来WOFFサポートを発表しています。



残念ながら、WOFFは誤解を招くような方法で宣伝されています。 WOFFが何であり、何が等しく重要で、何がそうでないかを知ることが重要であるため、少し停止しましょう。



兄のEOT （Embedded Open Type）と同様に、WOFFファイルは基本的にアーカイブされたフォントファイルです。 それ自体はフォント形式ではありません。 これは「路上で収集された」フォントファイルです。 BMPおよびTIFFの場合はPNGとJPEGの両方、TTFおよびOTFの場合はWOFF。 （圧縮されたイメージとは異なり、元のフォントは圧縮から解凍できます。実際には、WOFFとEOTは非常に似ており、それらの圧縮率はほぼ同じです。



WOFFは、商用フォントのライセンス供与のすべての障害を完全に解決する魔法のフォント形式ではありません 。 ウェブに関するフォントメーカーの不安ははるかに複雑であり、すぐにFHOSに関連して対処します。

IE9およびDirectWrite

IE9は、Windows DirectWrite APIを使用してフォントをレンダリングします。 IE9のプレビューバージョンをまだダウンロードしていない場合は、試してみることをお勧めします。 IE9プレビューで時間を費やした後、IE8およびXPに戻りたくないでしょう。 （Macユーザーは、笑わないでください。）IE9でのフォントのレンダリングは、予想をはるかに超えています。 間違いなくMacと同等で、場合によってはさらに良くなります。 あなたの意見がどうであれ、違いは著しく減少しました。 Webフォントに焦点を当てることの大きな副作用の1つは、Windowsブラウザーでフォントをレンダリングしたいという欲求が OS Xのブラウザーでのレンダリングと比較する方法に集中することです。DirectWriteはIE固有ではなくWindows APIであることに注意してください。また、Firefoxなどの他のブラウザでも実装されています。

IE9およびCSS3を使用する@ Font-Face

驚くべきことに、今日@font-face



優れたクロスブラウザソリューションになっているのは、IEが10年以上にわたって@font-face



をサポートしているからです。 ただし、CSS3仕様で説明されているように、IE9は@font-face



最初の実装になります。



主な変更点は次のとおりです。

フォント形式

IE9は、TrueType（TTF）フォントに加えて、PostScript風のOTF CFFフォントとBig Fiveブラウザーをサポートします。 この互換性の障壁を取り除くこと自体は非常に良いことですが、警告があります。IE6–8の下位互換性のためにのみ、WebフォントがTrueTypeでなくなる数年前に起こります。 IE 6–8は、EOTとしてパッケージ化されたTrueTypeフォントのみをサポートします。 さらに、Windowsのブラウザーには他のレンダリングの問題がありますが、これは覚えておく必要があります。



フォントデザイナーが、適切なTrueType ヒントを使用してTrueTypeで使用可能なフォントを作成することで、これに役立つことが期待されています。 または、あるフォントデザイナーが真剣に私に提案したように、IE8が登場するまで誰もがWebフォントの使用を控えるべきです。 ハ！ 遅すぎる 。

構文

CSS3の@font-face



「宣言」内では、Web作成者として、オペレーティングシステムが行う「安全な」フォントを使用する必要があります。 同じファミリ名でフォントを宣言して、フォントをファミリにグループ化する必要があります。 このファミリーのメンバーを分離し、それぞれがfont-style (normal, italic)



とfont-weight (normal, bold)



異なる組み合わせであることを宣言する必要があります。



font-style



セレクターとfont-style



セレクターは、メインスタイルシートのルール外の同じセレクターから@font-face



ルール内で異なる値を持つことに注意してください。 宣言の中で、 font-weight: bold



は「これはこのフォントファミリーの太字部分です」という意味です。宣言の外部では 、 font-weight: bold



は「 font-weight: bold



で宣言されたこのフォントファミリーのメンバーを使用してこのテキストにfont-weight: bold



を適用する」ことを意味します



IE6-8では、 @font-face



は同じように機能します。 ただし、EOTファイルが正しく機能するためには、EOTの作成元であるTTFファイル内の名前と説明情報の一部がCSS宣言と一致する必要があります。 ほとんどの場合、これは問題ではありません。 ただし、場合によっては、フォントデータテーブル内の一部のフィールドを変更する必要があります。 必要に応じて、すべての問題が調査され、簡単に修正できます。 （ EOTFASTのドキュメントの詳細。）

Web Font Toolkit

ウェブ制作者が持つべき重要なツール：

フォントリスジェネレーター

Generatorは、変換、クリーニング、CSSスタイルの生成などを提供するオンラインツールのセットです。 現時点では、これはWeb上で最高のものであり、フォントデザイナーおよびWeb開発者の手に渡るのはEthan Dunhamのみです。



また、Font Squirrel、Kernest、Googleなどの場所で舞台裏で使用されている無料のユーティリティをいくつか確認することもできます。

• FontForgeは 、サーバー側であらゆる種類の設定可能な機能を備えた本格的なフォントエディターです。 オープンソース。
• sfnt2woffは、TTFおよびOTF CFFフォントをWOFFファイルにパックするためのオープンソースユーティリティのセットです。
• ttf2eotはEOTFASTの前身です。 非圧縮の「ライト」EOTファイルを作成します。
• TTXは、OpenTypeおよびTrueTypeフォントをXMLに変換したり、XMLから変換したりするためのツールです。
• Fontueは、Webフォントおよびフォントを処理するためのスクリプトを表示するためのオープンソースエンジンです。 Githubへの貢献は大歓迎です。
• WebFont Loaderは、Google Font APIで許可されているよりもフォントの読み込みをより適切に制御できるJavaScriptライブラリです。 GoogleとTypeKitのコラボレーションで作成されました。

エファスト

私とケンブリッジのフィリップ・テイラーによって開発されたEOTFASTは、MicrosoftコンバーターWEFTの無料で使いやすい代替手段です。 EOTFASTを使用して、IE 6–8およびより高速なページ読み込みと互換性のある元の圧縮EOTファイルを作成します。 EOT形式は推奨されないものとして認識されず、IE9のすべてのレンダリングモードで動作し続けるため、条件付きコメントに頼らずにIEのすべてのバージョンで簡単に動作する方法を作成します。

信頼ライセンス

信頼ライセンス —開発を簡素化するためにインストール可能なTTFまたはOTFファイルとして提供される卸売価格のフォント、およびWebサーバーでの公開は、 Font Springで利用できます。 このサイトは、同様のすべてのサイトと同じように、フォントサンプルを提供するため、実際に購入する前にその製品を確認できます。 他の同様のサービスが、この単純なライセンスモデルを基礎とすることを願っています。

フォントストレージおよびマスキングサービス（FHOS）

@font-face



が登場する前は、ブラウザはフォントの問題でオペレーティングシステムに依存していたため、サイトでこれらをライセンスなしで使用することは問題ではありませんでした。 オペレーティングシステムは、技術的基盤であるだけでなく、立法基盤でもありました。 Webで「安全な」フォントを使用する権利は、オペレーティングシステムに付属しています。 ただし、フォントはWebサーバーから取得されるため、 @font-face



はオペレーティングシステムをバイパスします。 商用フォントの作成者は、コントロールを失い、まったく新しい法的現実を失う可能性に直面しています。 さらに、巨大な新しい市場の可能性がありますが、フォント業界内では、潜在的なコントロールの喪失を懸念しているので、それについて熱心ではありません。 ウェブ市場は未開拓であり、印刷市場は固定されています。 新しいメディアと古いメディアの競合が復活しています。今回はフォントです。



商用フォントの作成者の懸念は、サイト訪問者が好みのフォントを見つけ、CSSを調べてダウンロードする状況のシナリオよりもはるかに深いものです。 「マスキング」を使用するフォントサービスが存在する理由をよりよく理解できるように説明します。場合によっては、 混乱した愚かなライセンス契約があります。



フォントメーカーは、音楽、本、新聞、雑誌、 画像銀行に何が起こったのかを見て、同じことが起こるのではないかと恐れていました。 これはiTunes Effectと呼ばれ、価格に関するものです。



フォントデザイナーはまだ印刷にとても集中しています 。 一般に、お金の大部分は、印刷業界のプロのクライアント、つまり本、雑誌、アートワークなどに役立っています。 通常、価格は製品のユーザー数によって異なります。 彼らの主な懸念は、フォントがネットワークに表示されるとすぐに消費者向け製品になり、既存のビジネスモデルが崩壊し、フォントが低下することです。 フォントデザイナーは、「条件付きで」無制限の数のビジターのためにサイトでフォントを提供する世界では、6〜10ユーザーの4つのフォントファミリに対してたとえば420ドルを要求できないことを恐れています。 インターネットが印刷部門の価格を引き下げ、実際にそれ自体で収入を生み出さない場合はどうなりますか？

バイヤーへの注意

「インターネットの脅威」への対応として、一部の商用フォントデザイナーはフォントリポジトリと「マスキング」サービスを選択しました。 基本的に、これらのサービスはAmazon Kindleモデルを使用しますが、書籍の代わりに書籍の構成要素であるフォントを取得します。 フォントは、制御された方法で配布されるため、フォントの作成者は、各フォントがどこで使用され、どこで使用されるのか忙しくなります。 変装は、通常のダウンロードと、オペレーティングシステムにインストールされるフォントを作成する機能の防止に重点を置いているため、フォントはInDesignなどのプログラムで動作できなくなります。 このようなサービスの主な目的は、フォントファミリを手に入れることです。



昨年のTypekitの登場に続いて、Microsoft、Adobe、Monotype Imagingなどのフォントメーカーの代表者の間での議論の増加により、ここ数か月でMicrosoftのフォント配布プロキシ、 Ascender Corp 、 Extensis （ソフトウェアの専門家）などのマスキングサービスが作成されましたフォント管理とライセンス ）、 Monotype Imaging 、およびDavid Berlowの Font Bureauを含むチーム 。



Extensis、Ascender、Monotypeの3人は、Webにフォントを提供することに喜びと熱意を持っていると言えます。 しかし、これらのフォントの配布システムは、スマートであるが「 ダーティ 」なDRMのような構造の制限の中で作成されたことを、あっという間に伝えることはできません。 これは理解できます。 しかし、コードを介したライセンスのない配布のケースを特定および防止する試みは、事実上すべての場合、および将来的にはお勧めできません。フォントをマスクしようとする試みはすべて無駄で不適切です。



フォントデザイナーのRay Larabie が最高の結果を出しました 。



フォントをオペレーティングシステムにインストールされないように保護する一方で、Web以外の場所でフォントを使用することは逆行の兆候であり、ばかげているように見えます。 OSにフォントをインストールしますか？ はい、お願いします、おじいちゃん！ 近い将来、誰もオペレーティングシステムにフォントをインストールしたくないでしょう。

バイヤー、感謝する

いつものように、欠点があります。 FHOSはフェーズと見なすことができます。 サービスは常に更新されます。 たとえば、Extensis WebINKサービスは、 タイプドロワーフォントの無料のインストール可能な「タイププレビューア」で、特にドラッグアンドドロップするだけで、ページ上の特定のフォントを即座に変更できます。 これは多くの時間を節約し、これはデザイナーが仕事で必要とするものです。 現時点では、これは独自のWebINK開発ですが、サービス開発の方向性を形成しています。

フォントサービスのチェックリスト

私にとっては、 開発者向けの情報提供に注力しています。 そして、ウェブ作成者として、フォントに関してオペレーティングシステムに依存するべきではないので、予備として以外、フォントとしてのサイトのデザインの基本的かつ基本的な部分が外部によって制御されるという考えに不快感を覚えます本質。 さらに、私がこれについて話した単一の独立したWebデザイナーは、どんな状況でも、フォントに一定の費用をかけてクライアントを疲れさせることに同意しません。無料フォントは何千もあり、それらの多くはFHOSサービスを提供するものよりも高品質またはさらに高いものです。



言うまでもなく、少なくとも、サービスが提供するものと自宅にファイルを保管する場合にできることとの技術的な違いを知っておく必要があります。 デジタル化された書籍の爆発的増加に関連してEFFが最近提案したチェックリストの影響を受けて、FHOSサービスの利用者のチェックリストのバリエーションがあります。

1. オペレーティングシステムでのフォントのダウンロードとインストールを防ぐために作成された障害とは正確には何ですか？ その結果、サーバーリクエストの数はどのくらい増えますか？
2. キャッシュは無効になっていますか？ ユーザーは最初に「整形されていない」フォントを表示し、必要なフォントに置き換えられますか？ （スタイルなしテキストのフラッシュ）
3. フォントファイルをパーツに分割することがマスキングテクニックである場合、これはピッチとカーニングにどのように影響しますか？ また、一部のブラウザでは、フォントファイルを部分に分割することは追加のリスク要因ですか？
4. サービスは本当に標準を満たし、 @font-face?
   
   
   
   をサポートする最新のブラウザーが許可するように、CSS3標準を全幅で使用でき@font-face?
   
   
   
   
5. ユーザー同意書または使用条件は理解されていますか？ あなたまたはあなたのクライアントは、契約の拘束力のある条項に同意しますか？ サービスの使用を停止し、フォントを手元に置いておくと、契約に妥協しますか？
6. プライバシーポリシーとは何ですか？ サービスはサイトのアクティビティログを監視および保存しますか？ この情報はどうなりますか？
7. 契約の条件はあなたのサイトへの訪問者の権利を決定しますか？ サイトの訪問者は、画面に表示するだけでなく、フォントを使用して印刷し、PDFを作成する権利を持っていますか？ フォントファイルを個別にダウンロードしようとするユーザーは危険にさらされますか？ （それを直視しよう、私たちは皆、人々がどのようにサイトを作るかを見る、それがインターネットだ。）
8. WOFF（およびEOT）サポートがユビキタスになると、自宅でフォントを保存する方法がありますか、それとも永久にサービスに縛られますか？

コメントを歓迎します。

高度なOpenType機能

MozillaのJohn DaggettがCSS3 Fonts Moduleを率いる瞬間から、招待されたタイポグラフィデザインの専門家の印象的なチームは 、W3Cでの高度なタイポグラフィの課題について熟考してきました。

将来のフラッシュテキストの置換

iPhoneがリリースされてから数年が経ちましたが、フラッシュはまだ許可されていません。 iPadのように。 Steve Jobsの最近の声明は多くの注目を集めており、Appleがこの問題を引き下げるとは想像しにくい。 さらに、iPhoneおよびiPadは、SVG- @font-face



を使用してフォントをレンダリングするためのはるかにシンプルでエレガントな代替手段をサポートします。 新しいプロジェクトを計画している開発者にとって、sIFRテクノロジーの使用を想像するのは困難です。 @font-face



学習@font-face



容易であり、未来を持つ必要はありません。すでに未来です。

Google Font Library

Typekitのメンバーとの非公式な会話から生まれた予期せぬ開発のおかげで、GoogleはGoogle Ajax APIを通じて自由にライセンスされるフォントのプロバイダーになりました。 これは、 GitHubリポジトリで開発に貢献する方法に関するドキュメント、例、情報を見つけることができるオープンソースプロジェクトです 。多くのオープンソースプロジェクトとは異なり、このプロジェクトには永続的なキュレーターであるRaph Levienがいます。

今日は機能させましょう

本当に混乱してみましょう。IE6–8では、EOTまたはEOT“ Lite”（非圧縮）としてラップされたTTFフォントのみを使用できます。 Firefox、Opera、Chrome、およびSafariの場合、TTFまたはOTFファイルを未加工として使用するか、場合によってはWOFFファイルにラップするか、スタイルシート内のデータURIとして使用できます。SVGは今後の主要なフォント形式になりますが、今日の主な長所は、iPhoneおよびiPad用のモバイルSafariでのサポートです。



はい、これは紛らわしいです。最初は。常に大きな変化があります。しかし、私はウェブ制作者が彼らがいつもしていることをすることを期待しています。すべて機能させる方法を見つけてください。こことここの原料。ツールはこことここにあります。こことここでの解決策。したがって、数ページの例とテンプレートをまとめて、岐路に立つ準備をしてください。時が来ました。



A List Apart Magazineと著者[s] の許可を得て翻訳。