🙏 🔪 🎞️ Web上のフォント、2016年のレビュー 🙍🏻 💃🏼 ♟️

まえがき

この記事は、文字間隔や最大高さなど、タイポグラフィーやテキストに関連するすべての可能性についてではありません。むしろ、それは十分な好奇心と時間をかけて深く研究できる面白い機会のリストです。ほとんどの場合、彼らが耳の端から知らなかったり聞いたりしなかった何かがあることを願っています。

エントリー

2016年には、非標準のフォントを使用しているユーザーを驚かせることはありません。 93％のブラウザーがサポートしており、約62％のサイトがそれらを使用しています。誰かが単に@ font-faceを書くか、Google Fontsで<link>を埋め込みます。誰かがcssでbase64にメガバイトのフォントを直接埋め込みます。多くの機会があります。

読み込み中

記事は、フォントをダウンロードする際にブラウザーのさまざまな動作を示すタブレットなしでは不完全になりますが、挿入する余裕はありません。非常に一般的であるため、神経質なダニを引き起こす可能性があります。

一般的な概念：

FOIT-目に見えないテキストのフラッシュ。最初に、テキストのないページが描画され、すぐに目的のフォントで描画されます。

FOUT-スタイル付けされていないテキストのフラッシュ。最初に1つのフォントが使用され、次にロードされたフォントが使用されます。

FOFT-このサブタイプの問題を区別する人もいますが、あまり一般的ではありません。

Zach Leatherman （ロシア語版）による最近の記事では、さまざまなフォントのロード方法が非常によく説明されており、それぞれにプラスとマイナスがあります。さまざまなオプションの概要を簡単に説明します。勉強する必要がある場合は、一連のリンクが用意されています。

追加のトリックなしの@ font-face

それは一般的です、あなたはブラウザのなすがままにすべてを残すことができます。また、ユーザーがこの動作に既に慣れている可能性が高く、問題に気付かないという利点もあります。短所：ブラウザーごとに異なる動作、場合によっては物議を醸す動作。サファリおよびその他のブラウザでは、フォントの読み込みに問題がある場合、長時間何も表示されない場合があります。

長所：

余分な努力なし
おそらく、ユーザーはこの動作に慣れており、めったにこれに集中しない

短所：

異なるブラウザーでの異なる動作
場合によっては物議を醸す振る舞い

フォント読み込み検出ライブラリ

一般的な考え方：ロードする前に標準フォントを使用し、ロード後にクラスをbodyに切り替えて、新しいフォントがページ全体に含まれます。これは、Internet ExplorerおよびEdgeの標準的な動作に似ています。

長所：

フォント制御
小さいライブラリサイズ
ただ使う

短所：

ユーザーに気付くフォントの切り替え
テキストサイズの変更により、ページ上の要素が移動する可能性があります
再起動時にフォントが再描画されないためには、追加のトリックが必要です。cookiesのフラグ、sessionStorage

参照：

Base64フォントエンコーディング

最も多様な方法。フォントをメインスタイルシートに直接インラインで挿入したり、非同期でロードしたり、localStorageに追加したりできます。誰かにとって、gzipの後、サイズがバイナリファイルとはかなり異なることは予想外です。

長所：

一般に、フォントの読み込みを決定するために追加のライブラリは必要ありません
メイン部分と一緒に使用すると、cssはfoitとfoutの状況をあまり一般的にしません。
localStorageに保存する場合、すべてのフォントキャッシングが手元にあります

短所：

いくつかのタイプのフォントのサポートが失われました。それらを複製する必要があります（したがって、全体のサイズを大きくします）か、最も一般的なものを選択します（たとえば、woffとwoff2からの節約を失います）
CSSダウンロードの終了は、フォントがすぐに表示されることを保証するものではありません！このcssをページに直接貼り付けるように。ブラウザは、フォントを使用する前に解析する時間が必要です。これらはすべて、デフォルトのフォント、foit、目的のフォントの3段階のレンダリングになります。
単にcssで貼り付けると、ページ全体の最初のレンダリングが遅れます

参照：

フォント表示

ブート時にフォントの表示を制御できる新しいcssプロパティ。長所と短所は明らかです：使いやすさと貧弱なサポート（むしろ、なし）。

<link rel = preload>

これは正確なダウンロード方法ではなく、最適化です。プリロードを使用すると、Webフォントのダウンロードが終了するまでの時間を短縮できます。また、foitの可能性も低減できます。点滅ベースのブラウザは、対応するフォントを含むページ上のテキストを見つけた後にのみフォントのダウンロードを開始します。これにより、ページの最終表示が大幅に遅れます。cssをダウンロードし、解析し、ツリーハウスに適用し、目的の要素を見つける必要があります。 preloadは、指定されたリソースを今すぐロードする必要があることをブラウザに伝えます。 as、type、およびcrossorigin属性が必要です。

参照：

フォントのプリロードを使用する（ロシア語版）

残りすべて

上記のすべてのバリエーションがいくつかあり、JSを介したオプションもあります（詳細は以下を参照）。たとえば、ダウンロードできるフォントスタイルは1つだけで、残りは繰り返しアクセスするために使用できます。または、使用するフォント文字のセットを大幅に減らし（最大5〜10 kb）、すべてをbase64に入れます。または、最初の呼び出しで、最初の呼び出しで非標準のフォントを使用せず、それらをダウンロードするだけですか？また、テキストがほとんどない場合はフォントを使用できません。SVGはロゴに非常に適しています。何を選択しますか？デザイン、フォント、対象者に基づいて、誰もが自分で決定します。

書体

新しいjs-apiを使用すると、@ font-face宣言をまったく使用せずにフォントをダウンロードして使用できます。それが何であるかを明確にするためのいくつかの例：

var f = new FontFace("newfont", "url(newfont.woff)", {}); f.load().then(function (loadedFace) { document.fonts.add(loadedFace); document.body.style.fontFamily = "newfont, serif"; });

 fetch('newfont.woff2').then( res => res.arrayBuffer() ).then( buf => new FontFace("newfont", buf) ).then(ff => { document.fonts.add(ff) });

省略記号はコードの一部ではありません。

  new FontFace('t', 'url( "data:application/font-woff2;base64, <...>")').load();

問題は、サポートされている形式を直接理解できないことです。ブラウザのサポートも完全ではありませんが、Safari 10が追加されます。FontFaceは、テキストで非表示の要素を作成する必要がないため、キャンバスを介してテキストをレンダリングする場合に役立ちます。

参照：

CSSプロパティ

フォントの太さとフォントスタイル

font-weightは、よく知られているプロパティです。多くの場合、大胆で少ない頻度で見ることができます-数値に値があるもの。 Webが太字/斜体/太字-イタリックからますます選択されるようになったことは注目に値します。現在、すべての種類の薄い、軽い、中程度を見ることができます（そのようなキーワードはありませんが、数値が使用されています）。別の興味深い質問は、目的のスタイルが利用できない場合、ブラウザは何をしますか？ボールド/イタリックの場合、通常のフォントのバリエーションに基づいてグリフを生成しようとします。

参照：

ユニコード範囲

このプロパティを使用すると、フォントで表示する文字のリストを指定できます。これは最適化として役立ちます-このリストの文字がページに含まれていない場合、フォントはまったくロードされません。 unicode-rangeを使用して、引用符などの個々の文字のスタイルを設定したり、ルーブル記号を表示したりすることもできます。問題はブラウザによるこのプロパティのサポートにある可能性があり、徐々に消えつつありますが、「ユニコード範囲がなかったらどうなるか」を考える必要があります。

参照：

フォントバリアントおよびフォント機能設定

font-variant-font-feature-settingsのわずかに更新されたバージョン。これらのプロパティを使用すると、フォントに含まれる追加機能を使用できます。たとえば、カーニング、対角分数、合字、および象形文字のさまざまなオプション。

参照：

さまざまなフォント機能設定の説明

テキストレンダリング

このプロパティは、フォントのレンダリング速度の一般的なレギュレータとして考えられており、カーニングと合字に同時に影響します。その力にも関わらず、この物件は大きな分配を受けず、バジニーとブレーキの名声を得ました。現在、font-variantとfont-kerningを使用するのが理にかなっています。これらはより多くの制御を提供します（ブラウザのサポートがそれほど重要でない場合、そうでない場合はfont-feature-settings）。実際、テキストレンダリングはSVGのプロパティであり、CSS仕様には記述されていません。

参照：

フォントカーニング

font-kerningは、カーニング（個々の文字の組み合わせ間のインデント）の操作を制御します。含めるには、フォント自体にカーニング情報が必要です。これは、font-feature-settingsの機能の一部をより現代的に置き換えたものです。

参照：

フォントストレッチ

困難な運命を持つめったに使用されないプロパティ。 CSS 2で導入され、Internet Explorer 9のFirefox 9でサポートされていましたが、CSS 2.1から削除され、CSS 3の前に忘れられ、最近Chrome 48に追加されました。

インラインフォントの使用

OS XとiOSは、システムフォントに関して非常に興味深い状況にあります。最近、サンフランシスコがメインシステムインターフェイスフォントとして紹介されました。また、Helvitica Neueをフォントファミリで直接指定できる場合（少なくとも困難なバージョンでは少なくとも）、サンフランシスコではこの方法は意図的に困難でした。新しいロジックによれば、開発者が特定のフォントをシャープにしないため、そのような場合は、iOS 7でサポートされているキーワード「-apple-system- *」を使用する必要があります。

AndroidにはRobotoフォントがありますが、これは名前では使用できません。ただし、単純なsans-serif、sans-serif-light、sans-serif-mediumなどを使用できます。

ライセンスのため、一般的には、誰かのシステムフォントを取得してサーバーに配置することはできません。システムにインストールされているフォントのライセンスに関する心配がユーザーの肩にかかるため、cssでそれらを示すことのみが許可されます。

参照：

最適化

最も簡単な方法は、最適な形式を使用することです。少し前に登場したWoff2は、woffに比べてファイルサイズが約30％削減されているため、フォントの最適なオプションとして評価されています。 caniuseによる判断 -woff2はEdgeで間もなくサポートされ、新しいSafari 10でサポートされる予定です。

別の方法は、フォント自体から未使用の情報を削除することです。たとえば、未使用の言語の合字や文字セットです。また、ベクトルキャラクターカーブ自体を単純化することもできます。場合によっては、ポイントが多すぎて簡単に設定できることがあります。

参照：

要素の現在のフォントを決定する

時々、タスクは要素の現在のフォントを決定することです。開発の場合、Chromium Developer ToolsとFirefoxから最近返されたフォントが役立ちます。そうでなければ、要素のサイズを計算し、font-family値を変更した後に比較するためだけに残ります。 FontFaceOnloadとFontFaceObserverは、FontFace jsインターフェースがブラウザーで使用できない場合、このようなことを行います。ブラウザーがこのための明確なAPIを提供しないのはなぜですか？実際には、1つの要素内の個々の文字を異なるフォントで描画でき、それらはfont-familyにリストされています。これは、上記のunicode-rangeおよびフォントグリフセット自体の影響を受ける可能性があります。

Web上のフォント、2016年のレビュー