ホーム>Web サイト構築リソース>フォントのダウンロード
ダウンロード

反応フォントピッカー

React 用の Google フォント ピッカー コンポーネント。

  • 依存関係なし (React 以外)
  • Google APIキーは必要ありません
  • 1600 以上の Google フォント、カスタマイズ可能
  • 事前に生成された SVG 画像からの高速かつ高品質のフォント プレビュー
  • オプションでフォントを自動ロードします

https://github.com/Mikk3lRo/vue-fontpicker/ からフォークされました

フォントピッカーを示すアニメーション

ドキュメント

使用方法を含むライブデモは、https://ae9is.github.io/react-fontpicker/ から入手できます。

インストール中

 # npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts

# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite

次に、コンポーネントとスタイルシートをインポートします。 

 import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css'

スタイリング

CSS クラス名については、packages/fontpicker/src/components/FontPicker.css を参照してください。

フォントピッカーのスタイルを変更する例

フォントピッカーを実際のアプリに統合する例: ae9is/uimix

プロジェクトの構造

フォント ピッカー プロジェクトは、packages/fontpicker/ にあるこの Turborepo モノリポジトリにあります。

ライブデモは、 npm run dev経由で自分で実行できる Vite アプリで、 /docsにビルドされます。 tsconfig.jsonを使用します。

フォント ピッカー コンポーネント自体は、 tsconfig.types.jsonに従ってtsc経由で生成された型定義を使用して、 tsup (すなわちesbuild ) 経由で/distにビルドされます。

フォント プレビュー生成スクリプトは、フォント ファイルを/font-cacheにダウンロードし、フォント イメージ プレビューを/font-previewに構築します。

パフォーマンス

フォント ピッカーのプレビューは、CSS にフォント プレビュー画像ファイルをロードすることで機能します。初期プレビューを高速化するために、フォントは多くの画像ファイルに分割されます。

ドロップダウン選択を開くと、すべてのプレビュー画像ファイルが取得され、スムーズなスクロールと検索が可能になります。

フォント ピッカーが自動ロードに設定されていない限り、Google フォント API に対するリクエストは行われません。自動ロードに設定されている場合、現在選択されているフォントがページ ヘッダーに追加されます。 (以前に選択したフォントのリンクは削除されません。)

例えば： 

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

このアプローチの大きなトレードオフは、すべてのフォント イメージ プレビューのため、コンポーネントのバンドルが非常に大きくなることです (1633 フォントの圧縮 SVG イメージで 8 MB)。必ず圧縮された SVG を提供してください。 Vite の例については、こちらを参照してください。

より軽量なオプションを探している場合は、代わりに約 180 KB のreact-fontpicker-ts-liteを使用できます。

または、オンデマンド アプローチに従う別のフォント ピッカーについては、https://github.com/samuelmeuli/font-picker-react を確認してください。

font-picker-reactは Google API キーが必要で、デフォルトのフォント制限である 50 (フォントを選択) で最適に動作します。

フォントプレビューの構築

注: ほとんどのユーザーはフォント プレビューを再構築する必要はありませんが、最新のフォントを取得するか、プレビューを編集する必要がある場合の便宜のために、このセクションが含まれています。

1. Google APIキー

ここ https://developers.google.com/fonts/docs/developer_api#APIKey で Google API キーを取得し、 react-fontpicker/packages/fontpicker/scriptsのscripts/buildFontPreviews.tsと同じディレクトリにGOOGLE_API_KEYという新しいファイルを作成します。 scripts/buildFontPreviews.tsスクリプト。

2. フォントプレビュースクリプト

すべての Google フォント

現在利用可能なすべての Google フォント (ラテン語フォント ファミリのみ、 Kumar One除く) のフォント プレビューを生成します。 

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

注: 1600 フォントの場合、すべてのフォントをダウンロードするには 20 ～ 30 分と 800 MB を予算にしてください。画像プレビューのコンパイル自体は 1 分未満であるはずです。再実行すると、スクリプトは 1 週間以上前の新しいフォント情報のみを取得し、キャッシュされたフォントのダウンロードをスキップします。

カスタムフォント

カスタム フォントのフォント プレビューを生成するには、フォントに関する情報と、TTF 形式でダウンロードされたフォント ファイルへのパスが必要です。 

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

ここで、font-variants-info は、0,400 や 1,700 などの値を + で結合した配列です。最初の値は、通常 (0) または斜体 (1) フォントを示します。 2 番目の値はフォントの太さです (つまり、100 = 細い、400 = 標準、700 = 太字、900 = 重い)。

例えば： 

buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf "

package/fontpicker/package.json にあるbuild-font-previews-manual実行スクリプトを参照してください。

発達

インストール

このモノレポは Turborepo を使用します。

テスト

アプリはテストに Vitest と Cypress を使用します。システム上で Cypress の前提条件を必ずセットアップしてください。

Ubuntu の場合: 

apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて