ローカル フォントを使用して高度なタイポグラフィを使用する

Local Font Access API を使用して、ユーザーのローカルにインストールされたフォントにアクセスし、フォントに関する低レベルの詳細情報を取得する方法を学習します。

Thomas Steiner

ウェブセーフ フォント

ウェブ開発を長い間経験していれば、いわゆるウェブ開発の手法を覚えているでしょう。 ウェブセーフ フォント: これらのフォントは、最もよく使用されているオペレーティング システムのほぼすべてのインスタンスで使用できることが知られています。 （Windows、macOS、最も一般的な Linux ディストリビューション、Android、iOS など）。2000 年代初頭に Microsoft はさらに、 イニシアチブ という TrueType Core Fonts という、 "その目標を指定しているウェブサイトにアクセスするたびに、 サイト デザイナーが意図しました」のように記述します。はい、次のサイトが含まれています: Comic Sans MSこちらの 従来のウェブセーフ フォント スタック（最終的には、 sans-serif フォントなど）は次のようになります。

body {
  font-family: Helvetica, Arial, sans-serif;
}

ウェブフォント

ウェブセーフ フォントが真に重要な時代は、もはや過去のものとなりました。現在 ウェブフォント（一部はウェブフォント） 可変フォントも用意しています。 軸を示しています。ウェブフォントを使用するには、Terraform で CSS の先頭に @font-face ブロックを配置して、 ダウンロードするフォント ファイルを指定します。

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

その後、 font-family（通常どおり）:

body {
  font-family: 'FlamboyantSansSerif';
}

フィンガープリント ベクトルとしてのローカル フォント

ほとんどのウェブフォントはウェブから派生しています。しかし興味深い事実は @font-face の src プロパティ 宣言します。 url() 関数で、UDM イベントも local() 使用します。これにより、カスタム フォントをローカルで読み込むことができます。ユーザーが FlamboyantSansSerif がオペレーティング システムにインストールされている場合、ローカルコピーが使用されます。 確認します。

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

このアプローチは、帯域幅を節約できる可能性のある適切なフォールバック メカニズムを提供します。インターネットでは、 残念ながら 良いことはあり得ませんlocal() 関数の問題点は、 ブラウザ フィンガープリントに悪用されます。ユーザーがインストールしたフォントのリストを見やすく整えることができます。 特定します。多くの会社では、従業員が従業員の環境にインストールしている独自の企業フォントを ノートパソコンなどたとえば、Google には Google Sans という企業フォントがあります。

</ph> <ph type="x-smartling-placeholder">

攻撃者は、攻撃者がどの企業のために働いているかを調べるために、 Google Sans など、よく知られている企業フォントを多数使用できます。攻撃者はテキスト レンダリングを試行し、 キャンバスでこれらのフォントを設定し グリフを測定しますグリフが既知の形状と一致していれば、 攻撃者がヒットします。グリフが一致しない場合、攻撃者は 企業フォントがインストールされていなかったため、デフォルトの代替フォントが使用されました。P-MAX についての その他のブラウザ フィンガープリント攻撃については、 アンケート用紙 Laperdix 他

会社のフォントは異なっており、インストールされているフォントのリストだけでも識別できます。この状況は、 この攻撃ベクトルが悪化したため、最近では WebKit チームが 決める 「[利用可能なフォントのリスト] のウェブフォントとフォント（オペレーティング ユーザーがインストールしたローカルのフォントは対象外です。」（こちらは、アクセス権の付与に関する記事を ローカル フォントに変換できます）。

Local Font Access API

この記事の冒頭は気分が良くなかったかもしれません。コンテナ イメージに 何か？ご安心ください。その可能性はあるが すべてが絶望的なものではありません その前にまず、皆さんの疑問に答えましょう。

ウェブフォントがあるのに、Local Font Access API が必要なのはなぜですか？

プロ品質の設計ツールとグラフィック ツールは、従来、 あります。1 つの障壁は、プロとして利用できるツールすべてにアクセスして使用できないことです。 デザイナーがローカルにインストールしている、構築され、ヒンティングされたフォントです。ウェブフォントを使用すると ベクター グリフの図形とフォント テーブルへのプログラムによるアクセスを ラスタライザを使って グリフの枠線をレンダリングします同様に、ウェブフォントのバイナリにアクセスする方法も 分析できます

• デザインツールは、独自の OpenType レイアウト実装を行い、 設計ツールを設計し、ベクトル フィルタの実行や、 必要があります。
• デベロッパーは、ウェブで使用するアプリケーションのために従来のフォント スタックを使用していることがあります。 これらのスタックを使用するには、通常、フォントデータに直接アクセスする必要がありますが、ウェブフォントではアクセスできません。 提供します。
• 一部のフォントは、ウェブで配信するためのライセンスが付与されていない場合があります。たとえば、Linotype には、 PC 版しか使用できないフォントもあります。

Local Font Access API は、こうした課題を解決するための試みです。次の 2 つの部分で構成されます。

• Font Enumeration API: 使用可能なすべてのシステムセットへのアクセス権をユーザーが付与できます 使用できます。
• 各列挙結果から、低レベル（バイト指向）の SFNT コンテナをリクエストできる アクセスします。

ブラウザ サポート

Local Font Access API の使用方法

機能検出

Local Font Access API がサポートされているかどうかを確認するには、次のコマンドを使用します。

if ('queryLocalFonts' in window) {
  // The Local Font Access API is supported
}

ローカル フォントの列挙

ローカルにインストールされているフォントのリストを取得するには、window.queryLocalFonts() を呼び出す必要があります。「 初回は権限プロンプトがトリガーされ、ユーザーはこれを承認または拒否できます。ユーザーが がローカル フォントのクエリを承認すると、ブラウザはフォントデータを含む配列を返します。 基づいています。各フォントは、family プロパティを持つ FontData オブジェクトとして表されます。 （例: "Comic Sans MS"）、fullName（例: "Comic Sans MS"）、postscriptName（例: 例: "ComicSansMS"）、style（例: "Regular"）。

// Query for all available fonts and log metadata.
try {
  const availableFonts = await window.queryLocalFonts();
  for (const fontData of availableFonts) {
    console.log(fontData.postscriptName);
    console.log(fontData.fullName);
    console.log(fontData.family);
    console.log(fontData.style);
  }
} catch (err) {
  console.error(err.name, err.message);
}

一部のフォントのみが必要な場合は、PostScript の postscriptNames パラメータを追加します。

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

SFNT データへのアクセス

SFNT へのフルアクセスは、blob() FontData オブジェクト。SFNT は、PostScript、 TrueType、OpenType、Web Open Font Format（WOFF）フォントなどです。

try {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ['ComicSansMS'],
  });
  for (const fontData of availableFonts) {
    // `blob()` returns a Blob containing valid and complete
    // SFNT-wrapped font data.
    const sfnt = await fontData.blob();
    // Slice out only the bytes we need: the first 4 bytes are the SFNT
    // version info.
    // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
    const sfntVersion = await sfnt.slice(0, 4).text();

    let outlineFormat = 'UNKNOWN';
    switch (sfntVersion) {
      case '\x00\x01\x00\x00':
      case 'true':
      case 'typ1':
        outlineFormat = 'truetype';
        break;
      case 'OTTO':
        outlineFormat = 'cff';
        break;
    }
    console.log('Outline format:', outlineFormat);
  }
} catch (err) {
  console.error(err.name, err.message);
}

デモ

Local Font Access API の動作については、 デモをご覧ください。このモジュールの ソースコード。デモ <font-select> というカスタム要素を示しています。 ローカルのフォント選択ツールを実装します。

プライバシーへの配慮

"local-fonts" 権限は、フィンガープリント性の高いサーフェスを提供するようです。ただし、 ブラウザは任意のものを自由に返すことができます。たとえば、匿名性を重視するブラウザであれば、 ブラウザに組み込まれている一連のデフォルト フォントのみを提供するよう指定できます。同様に、ブラウザは必須ではありません。 ディスク上にあるとおりのテーブルデータを提供します。

Local Font Access API は可能な限り、 要件がありますシステム API により、ブラウザ環境にないインストール済みフォントのリストが フォントのインストール順にします。指定した名前と完全に一致する このようなシステム API によって提供されるインストール済みのフォントにより、 フィンガープリント、有効にするユースケースでこの順序を維持することはできません。たとえば、 この API では、返されたデータが返される前に並べ替える必要があります。

セキュリティと権限

Chrome チームは、基本原則に基づいて Local Font Access API を設計、実装しました。 強力なウェブ プラットフォーム機能へのアクセスの制御で定義されている 制御、透明性、エルゴノミクスの点で優れています。

ユーザー コントロール

ユーザーのフォントへのアクセスは、完全な制御下にあるため、 "local-fonts" 権限（ 権限レジストリ）が付与されます。

透明性

ユーザーのローカル フォントへのアクセス権が付与されているサイトは、 サイト情報シートをご覧ください。

権限の永続性

"local-fonts" 権限は、ページを再読み込みしても維持されます。これは、 サイト情報シートです。

フィードバック

Chrome チームでは、Local Font Access API の感想をお聞かせください。

API 設計について教えてください

API について、想定どおりに機能していないものはありますか？あるいは不足しているメソッドがあるか アイデアを実現するために必要なものやプロパティは？セキュリティに関する質問またはコメント どうすればよいでしょうか。対応する GitHub リポジトリで仕様に関する問題を報告するか、 解決します

実装に関する問題を報告する

Chrome の実装にバグは見つかりましたか？または、実装が仕様と異なっていますか？ new.crbug.com でバグを報告します。できるだけ詳細に説明してください [Components] ボックスに「Blink>Storage>FontAccess」と入力します。 Glitch は、すばやく簡単に再現を共有するのに最適です。

API のサポートを表示する

Local Font Access API を使用する予定はありますか？皆様の公開サポートは、Chrome チームが次のことを実現できるように支援します。 他のブラウザ ベンダーがそれらの機能をサポートすることの重要性を説明します。

ハッシュタグを使用して @ChromiumDev にツイートしてください #LocalFontAccess を押して、 どこでどのように使用されているかを Google に知らせることができます。

関連情報

• 説明
• 仕様ドラフト
• フォント列挙に関する Chromium のバグ
• フォント テーブルへのアクセスに関する Chromium のバグ
• ChromeStatus のエントリ
• GitHub リポジトリ
• TAG の審査
• Mozilla の標準的な位置

謝辞

Local Font Access API の仕様が編集されました Emil A.Eklund、 Alex Russell 氏、 Joshua Bell、 Olivier Yiptong。この記事をレビューしたユーザー: Joe Medley Dominik Röttsches Olivier Yiptong。ヒーロー画像: Brett Jordan: スプラッシュを解除。