使用Typekit (Adobe)字体对？

Question

我最近打开了一些我必须开发的移动应用程序模型。我用的是“反应本土化”(与世博会)。问题是，这个模型使用了很多Adobe字体(Typekit)。

我偶然发现了一个文档：https://helpx.adobe.com/fonts/using/embed-codes.html，它可以用于网络应用，而不是编译好的移动应用程序。

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

Answer 1

来自Adobe的网站上的字体许可页面

我可以将字体嵌入到我正在构建的移动或桌面应用程序中吗？否。字体许可不允许您在移动或桌面应用程序中嵌入字体。这需要从铸造厂或其授权转售商那里直接购买适当的许可证。

繁琐的方法：(仅用于信息或测试目的)

警告：可能不允许下载脱机使用的字体的下列方法。相反，您应该从其他地方的获取字体文件，google字体允许您下载它们.

一旦您将字体添加到Typekit上的web项目中，获取嵌入链接(href)，该链接将用于获取正常web项目的.css，例如https://use.typekit.net/XXXXXX.css。在浏览器中访问站点以查看内容，并从每个@font-face css块下载第一个链接。将其重命名为"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* 某处，将其重命名为字体名，并遵循安装字体的通常方法。(即使用react-native.config.js和一个资产/字体/目录，并在项目中的样式对象中使用字体名称**(而不是字体文件名)。

我的经验:我从文件中下载了一种woff2格式的字体，将它转换成ttf，将字体文件重命名为字体名，将其放入项目中，运行npx react-native link (即使im使用自动链接)，因此它可以同时在iOS和Android应用程序上工作。

最近，我回答了一个关于如何安装针对react的字体的https://stackoverflow.com/a/59650957/7365866。

*为什么我们要转换成ttf?:各@字体块都有多种不同的格式，但是第一个链接(woff2格式)只在iOS上工作，而我只在react本机上工作。Android无法加载它，甚至android工作室也无法打开该文件。最后一个链接(otf格式)只能在安卓系统上运行，而iOS不能加载它。因此，解决方案只是接受woff2文件并将其转换成ttf，这是我通常用于自定义字体的react本机。

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

Answer 2

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