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. 谷歌API密钥

在此处获取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 字体生成字体预览（仅限拉丁字体系列，减去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