@font-face
一般的に、ロシア語では
@font-face
を使用した経験とニュアンスに関する十分な情報がないため、この翻訳では、このトピックに関する多かれ少なかれ有益な情報フィールドの生成を開始することをお勧めします。 ヒース
長い間、ウェブ用のデザインを作成していたため、私たちは活版印刷で甘やかされていました。 はい、あなたは正しいと聞きました。 考えてみてください。Web用のフォントは既にコンピューターにインストールされています。 これらのフォントは元々、小さなピンを含むブラウザでの高品質表示用に作成されました。 他のユーザーがこれらのフォントを使用していることを常に確認できます。
はい、甘やかされました。 Verdan、Georgia、またはCumbriaを使用するために、考える必要はありませんでした。
しかし、長い間、デザイナーにはもっと必要なもののようでした。 設計に必要なフォントを使用したいと考えています。 この目標を達成しようとして、私たちは多くの悪いことをしました。たとえば、画像にテキストを入れました。 賢い人は、 sIFRやCufónなどの補助ツールを思いつき ました 。 最近では、ほとんどのブラウザが
@font-face
サポートしています。 ダムが開きます。 これはウェブタイポグラフィの新しい時代の夜明けであり、慎重に踏み込む必要があります。
新しいタイプセッター
古代では、コンピュータータイピングが出現する前に、特定のフォントでテキストを入力する場合は、タイプセッターに連絡する必要がありました。 タイプセッター、またはタイプセッターとも呼ばれているのは、書かれた単語を選択し、選択したフォントの文字から「タイプ」した人のような人でした。 デザイナーは、フォント自体（すべての合字、斜体、その他すべて）を選択し、タイプセッターが適切なフォントでテキストを入力できるように原稿全体を落書きする必要がありました。
その後、Computer Kitが登場し、Vasya、Petya、Kolya自身が自分のコンピューターでフォントを選択できるようになりました。 印刷チェーンのリンク全体は、わずか数年で削除されました。 これはおそらく進行中です。 そのため、レイアウトは半年前までTypekitフォントサービスを装ってWeb上で生まれ変わりました。
Typekit、およびTypotheque、Kernest、その他のFontdeckなどの他の同様のサービスは、以前はタイプセッタとして機能していましたが、これはWeb上でのみ有効です。 テキストをWebページとしてフォーマットすると、選択したフォントでページを表示するJavaScriptコードが提供されます。フォント名をCSSファイルに追加するだけです。
このようなサービスのおかげで、フォントメーカーは現在、法律を破ることなくWebページにフォントを埋め込むことを可能にするさまざまなライセンスオプションについて議論しています。 最後に、デザイナーは長い間求めていたもの、つまりウェブ上のあらゆるフォントを使用できる機能を手に入れました。
はい、しかし...問題があります。 それらの1つは、この記事の主題です。
Webフォントと他のフォントの違い
Webフォントは通常のものとは異なります。 それらは多くの異なるパラメーターで異なります：より広い文字間スペースから小文字の増加した増加まで。 しかし、おそらく実際の最も顕著な違いはファイルサイズです。 たとえば、最新のTypekit更新の1つであるFontFontライブラリのMetaヘッドセットを検討してください。
メタローマンの重さは42キロバイトです。 これは、優れたフォントの1つのスタイルとしてはかなり普通のサイズです。 それでは、Verdanaを見てみましょう。 Verdanaの重量は186キロバイトです。 1つのトレース。 4つの顔のファミリーの重量はすでに686キロバイトです。 半メガバイトあたり4つの顔？ なぜそんなに多いのですか？
さて、Verdanaはこれらの186キロバイトに多くの情報を詰め込んでいます。 彼女はすべてのフォントの中で最大のヒンティングテーブルを持っています（これは、ピクセル単位の文字の正しい配置による画面上の文字の形状の歪みを最小限に抑える情報です）。 1996年以来マイクロソフト製品と共に出荷されており、膨大な数の言語をサポートするために成長するのに十分な時間がありました。 妹のJordia（283キロバイト）と一緒に、Verdanaは新しい種類のフォントを使用していました。 厚くて脂肪。
Webタイポグラフィが本当に真剣に始まった場合-私はスクリーン用に特別に設計されたフォントを意味します-より多くのデータを含めることにより、フォントの重量が増加することがわかります。 100キロバイトのフォントを含めると、どうなりますか？
スタイルなしのテキストフラッシュ
Internet Explorerのスタイル設定されていないコンテンツのフラッシュに関するバグを覚えていますか？ スタイルが適用されていないHTMLページが一瞬表示されたため、迷惑なバグ。
@font-face
を使用してフォントを埋め込むときにも同じことが起こります。 「スタイルなしテキストのフラッシュ」と呼ばれるこの効果は、「FOUT」と略され、 ポール・アイリッシュによって最初に発見されました。 個人的には、スタイルはテキストに適用されますが、必要なスタイルは適用されないため、「不完全なテキストのフラッシュ」という名前がより好きです。
CSSにフォントを含めると、ブラウザーはそのフォントをダウンロードします。 ただし、ブラウザはこれを異なる方法で行います。
FirefoxおよびOperaは、最初の（組み込み）フォントがロードされるまで、スタイル定義で次のフォントを使用してテキストを表示します。 次に、ダウンロードしたフォントにフォントを変更します。
Webkitは、指定した正確なフォントがまだ必要であることを示唆しているため、フォントが完全にロードされるのを待ってからテキストを表示します。
OperaとFirefoxでは、スタイル設定されていないテキストのフラッシュが表示されます。 Webkitはありません-あなたは愚かに待っています。
停止停止停止。 優れたWebフォントは、「通常の」フォントよりもはるかに軽いとは言いませんでしたか？ そして、ブラウザがフォントを読み込んでいる間に、ユーザーは何か見なければなりませんか？ 写真、背景色、その他すべて-HTMLではありませんか？ Webkitの方法-非常に慎重な方法-は、フォントの埋め込みの実践にとって破壊的だと思います。 なんで？ Webページを設計するときにFOUTを考慮に入れることができますが、フォントの読み込み中に表示される空白に対処することはできません。
FOUTに対処する方法を見てみましょう。
CSSのフォント定義について少し
ユーザーがフォントを持たないという問題を解決するために、CSSのスタイル定義でいくつかのフォントが指定されていることは誰もが知っています。 コンピューターのユーザーが
font-family
リストの最初のフォントを持っていない場合、ブラウザーは次のフォントに進みます。 埋め込みフォントをリストに追加すると、ユーザーはGeckoとOperaでフォントの変更を（リストの次のフォントから前のフォントに）見ることができます。 また、インターネット接続の速度に応じて、この変更は、ユーザーが定型化されたテキストを読むときなど、いつでも発生する可能性があります。
実際には、これは、段落を読む過程で、段落の外観を変更できるという事実につながります。 そして、ユーザーが現在いた言葉は、以下の3行になります。 これは、予想外の瞬間に誰かが本のページをめくるオンラインの類似物です。 この影響を減らすために、フォントリストで何ができるでしょうか？
2年前、Richard Rutterはフォントリストの増加に関する 「24の方法」 に関する記事を書きました 。 （彼が提案した便利なマトリックスを使用して）リストを拡大すると、さまざまなフォントを試すことができます。 しかし、フォントを埋め込むときは、リスト内のすべてのフォントとそれらの互換性を非常に注意深く監視する必要があります。 以前は、ユーザーはいずれかのフォントを見ていました。 両方ではありません。 FOUTのため、彼には2つのフォントが表示されます 。
リスト用に選択したフォントの特性を慎重に検討したので、それらの間の活版印刷の「距離」を減らすことができます。 これを行うことにより、フォントを変更することによる不快な影響を大幅に減らすことができます。
このプロセスをさらに詳しく考えてみましょう。
最高のフォントリストのためのマイクロタイポグラフィ
TypekitにフォントMeta Serif Bookを埋め込むことを選択したとします。 フォントのリストは次のように始まります。
フォントファミリー： 'Meta Serif Bold';
次に進む方法は？ まず、Richard Rutterのマトリックスを見て、さまざまなユーザーが使用できるフォントを確認してください。 次に、埋め込みフォントの文字を慎重に検討し、それらをマトリックスの異なるフォントと比較します。
これを行うとき、小文字の成長、コントラスト（ストロークの太さの違い）、楕円の軸の傾き（ストレス）、およびセリフの形状（フォントにセリフがある場合）の一致を監視します。
この最小数の特性を比較しても、最適な組み合わせをすばやく見つけることができます。 そして、覚えておいて、あなたは完全に一致する必要はありません。 フォントを切り替えることは読者にとって最も苦痛が少ないことだけが必要であり、フォント自体はページ全体のデザインを損なわないようにビルトインと同様の特性を持つべきです。
選択した埋め込みフォントに基づいて、いくつかのフォントで個々の文字を比較します。
そして、必要なリストを作成するのに最適なフォントを選択します。
CSSでは、次のようになります。
フォントファミリー：「Meta Serif Bold」、「Lucida Bright」、カンブリア、ジョージア、セリフ
このプロセスに続いて、「スタイルが設定されていないコンテンツのフラッシュ」のエラーを軽減し、ページで読者が否定的な経験を得ないようにすることができます。