在 React Native 项目上使用 Typekit (Adobe) 字体?

Using Typekit (Adobe) fonts on React Native project?

我最近打开了一些我必须开发的移动应用程序模型。我正在使用 React Native(与 Expo)。问题是,这个模型使用了很多 Adob​​e 字体 (Typekit)。

我看到了文档:https://helpx.adobe.com/fonts/using/embed-codes.html,它可以在 Web 应用程序上使用,但不能在编译的移动应用程序上使用。

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

正确的方法是指定您需要在本机代码中使用的字体。意思只是使用它。 然后在您的 android 和 ios 构建项目中,只需将字体导入您的资源。 希望这有帮助

来自 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 字体允许您下载它们。

将字体添加到 Typekit 上的 Web 项目后,获取嵌入的 link (href),它将用于获取普通 Web 项目的 .css,例如https://use.typekit.net/XXXXXX.css。在浏览器中访问该站点以查看内容,并从每个 @font-face css 块下载第一个 link。将其重命名为 "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(即使我使用自动linking)等它在 iOS 和 Android 应用程序上工作.

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

*我们为什么要转换成 ttf?: 每个@font-face 块都有多种不同的格式,但第一个 link(woff2 格式)只适用iOS 对我来说是 React Native。 Android 无法加载它,甚至 android studio 也无法打开该文件。而最后的link(otf格式),只对Android有效,iOS加载不出来。所以解决方案就是将woff2文件转换为ttf,这是我通常在react native上用于自定义字体的方式。

**为什么我需要将文件重命名为字体名称?: 记住 iOS 使用字体名称,但 android 使用文件名。最简单的解决方案是将文件重命名为字体名称,这样您的代码 iOS 和 android 上的 运行s 无需使用 Platform 模块。 (字体名称是用字体应用程序打开字体找到的)