android - 在 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 的字体许可页面 website :

Can I embed the fonts in a mobile or desktop application I’m building? No. The font licensing does not allow you to embed the fonts within mobile or desktop applications. This requires an appropriate license to be purchased directly from the foundry or one of their authorized resellers.

繁琐的方法:(仅供引用或测试目的)

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

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

@font-face {
font-family:"bungee";
src: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");
font-display:auto;font-style:normal;font-weight:400;
}

将其转换成.ttf* somewhere ，将其重命名为字体名称并按照通常的安装字体的方式进行操作。 (即使用 react-native.config.js 和 assets/fonts/目录，并在项目的样式对象中使用字体名称**(不是字体文件名称) .

我的经验:我已经设法从css文件中以woff2格式从Typekit下载字体，将其转换为ttf，将字体文件重命名为字体名称，将其放入项目中，运行 npx react-native link(即使我使用的是自动链接)，因此它可以在 iOS 和 Android 应用程序上运行。

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

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

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