GoogleWebFonts FontFamilyPreviewImages

Google Web Fonts -Fontファミリプレビュー画像

このレポは、すべての異なるGoogleフォントの表現である画像が含まれています。ユーザーが（APIを介して）Googleフォントを介して検索できるようにするため、アプリステンシルにこれが必要でした。しかし、私たちは（明らかに）フォントがどのように見えるかのプレビューを提供することを望んでいました。

フォントをメモリにロードしてからそれらを表示することもできましたが、それは理想的ではなかったようです。

注記

以下に表示されているスクリーンショットのホストバージョンに興味がある場合（ユーザーがモーダルをトリガーできるようにし、ボタンをクリックすることで、対応するwoff2ファイルのURLを含むイベントをクリックすることができます）

このリポジトリの画像をどのように使用するかのスクリーンショット：

なぜそんなに多くのファイルがあるのですか？

Google Fontsは現在、数千の異なるフォントのバリエーションを提供していますが、実際の画像は多数あります。これは、Googleフォントがあるバージョンから別のバージョン（例えばv5からV6）に定期的に更新されるためです。次に、画像を再レンダリングして、ユーザーが正確であることを示すプレビューを確認します。

後世のためにこれらのファイルをリポジトリに残すことにしました：あなたは人々が何を必要とするかわからない:)

サイズ

現時点では、 font-sizeの値が48pxのプレビュー画像のみを提供しています。幅は、フォントのネイティブ幅を尊重します。シャープなディスプレイを確保するために、 24pxの最大高さでプレビュー親指をハードコードすることをお勧めします。

ファイルの命名規則：

2つの例： ABeeZee-400.v10.pngとCabin-400italic.v10.png
フォーマットは非常に簡単です：

• フォント名（非hyphen、非アルファベット、および非数字の文字が削除されます）
• ダッシュ（ - ）
• フォントウェイト
• フォントがイタリック化されたバージョンの場合、フォントの後、 italic言葉が追加されます
• 文字vが先行するバージョン番号

名前を削除するために使用する正規表現は/[^A-Za-z0-9-]/とおりです。