react fontpicker

反應字體選擇器

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

專案結構

字體選擇器專案位於這個 Turborepo monorepo 中，位於packages/fontpicker/

現場演示是一個 Vite 應用程序，您可以透過npm run dev自行運行，並建置到/docs 。使用tsconfig.json 。

字體選擇器元件本身透過tsup （即esbuild ）建置到/dist並根據tsconfig.types.json透過tsc產生類型定義。

字體預覽生成腳本將字體檔案下載到/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. GoogleAPI金鑰

在此處取得Google API金鑰https://developers.google.com/fonts/docs/developer_api#APIKey並在react-fontpicker/packages/fontpicker/scripts中建立一個名為GOOGLE_API_KEY的新文件，與scripts/buildFontPreviews.ts位於同一目錄中scripts/buildFontPreviews.ts腳本。

2.字體預覽腳本

所有Google字體

為所有目前可用的 Google 字體產生字體預覽（僅限拉丁字體系列，減去Kumar One ）。

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

注意：對於 1600 種字體，預算 20-30 分鐘和 800 MB 來下載所有字體。編譯圖像預覽本身應該不到一分鐘。重新運行時，腳本僅檢索超過 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) 字體。第二個值是字體粗細（即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 "

請參閱以下位置的build-font-previews-manual執行腳本：packages/fontpicker/package.json

發展

安裝

這個 monorepo 使用 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