在 React Native 项目中使用 Typekit (Adobe) 字体？

Question

我最近打开了一些我必须开发的移动应用程序模型。我正在使用 React Native（带有 Expo）。问题是，这个模型使用了大量 Adob​​e 字体 (Typekit)。

我遇到了文档： https: //helpx.adobe.com/fonts/using/embed-codes.html，它可以在网络应用程序上使用，而不是在编译的移动应用程序上使用。

我找不到任何相关问题，但我想知道移动应用程序开发人员如何在他们的项目中实现 Typekit 字体？

Answer 1

从 Adob​​e网站上的字体许可页面：

\n\n

\n

我可以将字体嵌入到移动或桌面应用程序 I\xe2\x80\x99m 中吗？\n 否。字体许可不允许您将字体嵌入\n 移动或桌面应用程序中。这需要直接从铸造厂或其授权经销商之一购买适当的许可证。

\n

\n\n

乏味的方法：（仅供参考或测试目的）

\n\n

警告： Adobe 可能不允许以下下载字体以供离线使用的方法。相反，您应该从其他地方获取字体文件，谷歌字体允许您下载它们。

\n\n

将字体添加到 Typekit 上的 Web 项目后，获取嵌入链接 (href)，该链接将用于获取.css正常 Web 项目的字体，例如https://use.typekit.net/XXXXXX.css. 在浏览器中访问该站点以查看内容，并下载每个@font-facecss 块中的第一个链接。将其重命名为"fontName".woff2.

\n\n

@font-face {\nfont-family:"bungee";\nsrc:url("https://use.typekit.net/af/dd8be0/00000000000000003b9b2a4f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/dd8be0/00000000000000003b9b2a4f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/dd8be0/00000000000000003b9b2a4f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");\nfont-display:auto;font-style:normal;font-weight:400;\n}\n

\n\n

将其转换为.ttf*某处，并将其重命名为字体名称并按照通常的安装字体的方式进行。（即使用react-native.config.jsasset/fonts/ 目录，并在项目中的样式对象中使用字体名称**（而不是字体文件名）。

\n\n

我的经验：我已经设法从 css 文件中以 woff2 格式从 Typekit 下载字体，将其转换为 ttf，将字体文件重命名为字体名称，将其放入项目中，运行npx react-native link（即使我使用自动链接）等等它适用于 iOS 和 Android 应用程序。

\n\n

我最近回答了一个关于如何为react-native安装字体的问题。

\n\n

*为什么我们要转换成 ttf？：每个 @font-face 块都有多种不同的格式，但第一个链接（woff2 格式）仅适用于 iOS 上的 React Native。Android 无法加载它，甚至 android studio 也无法打开该文件。最后一个链接（otf 格式）仅适用于 Android，iOS 无法加载它。所以解决方案就是获取 woff2 文件并将其转换为 ttf，这是我通常在 React Native 上用于自定义字体的方法。

\n\n

**为什么我需要将文件重命名为字体名称？：请记住，iOS 使用字体名称，但 android 使用文件名称。最简单的解决方案是将文件重命名为字体名称，这样您的代码就可以在 iOS 和 Android 上运行，而无需使用该Platform模块。（通过使用字体应用程序打开字体即可找到字体名称）

\n