在 NativeScript 应用中使用自定义字体

经验丰富的 Web 和移动开发者都知道，为应用增添趣味的一个简单方法是切换到自定义字体。哎呀，我经历过足够长的时间，还记得 90 年代后期的 Verdana 复兴！

90s banner

虽然 90 年代的波浪和柔和色调早已过去（RIP！⚰️），但创建引人入胜的用户界面的愿望并没有改变。所以让我们用 NativeScript 来实现这一点。

关于如何使用自定义字体的疑问，主要在NativeScript 文档中进行了处理。但是，您可能需要一些额外的提示来帮助您顺利实现 Comic Sans 的辉煌。

comic sans hate

查找字体

您是否已经准备好要使用的字体？如果是，请跳至下面的TTF、OTF、WTF？部分。其余的，请继续阅读！

如果您正在寻找一些适用于移动设备的字体创意，那么您来对地方了。在选择下一个优秀的移动应用字体时，您有几个选项。

系统字体

iOS 和 Android 都预装了一套字体。问题在于 iOS/Android 字体的维恩图重叠不多。因此，如果您选择系统字体，则 iOS 和 Android 的选择可能会有所不同（更不用说每个 Android 版本都可能安装了截然不同的字体）。

但是，系统字体是进行实验的好方法！无需下载并复制到您的应用中。您只需选择一种字体，然后更新您的 CSS。

🍎 在iosfonts.com上查找 iOS 系统字体的列表；
🤖 在Stack Overflow 上的这个详细的帖子中查找 Android 系统字体的列表。

从图像中识别字体

我发现新的自定义字体通常来自现有的 Web 或移动 UI。也许我不是一个有创意的人，但当我看到我喜欢的东西时，我非常擅长复制它😅。

幸运的是，我们在 Font Squirrel 的朋友提供了一种Font Matcherator服务，该服务通常能够胜任从图像中识别字体的任务！

让我们从以下图像开始

original image

我喜欢这种独特的字体。所以我转到Font Matcherator。

font matcherator

…它会输出各种建议（免费和付费的）

font matcherator results

在这种情况下，我选择了便宜的Varela 字体，因为它对我来说已经足够接近原始字体了。

其他字体资源

使用 Google 的强大功能，您也许能够找到另一个您想要的免费（或付费）字体。我最喜欢的字体网站是Google Fonts（因为它们都是免费的，而且我比较抠门！）和Font Squirrel（因为它们拥有其他所有字体，当我真正愿意打开钱包的时候💸）。

TTF、OTF、WTF？

好的，您已经找到了想要的字体，下载并解压缩了它。有时（例如 Roboto）您最终会得到这样的结果

roboto font files

但我只想用 Roboto！

因此，有时需要进行一些挑选和选择才能确定您确切需要的字体文件。如果您刚开始使用字体，最好只包含所有具有.ttf 或 .otf 文件扩展名的文件。对于 NativeScript 来说，这两者没有区别，因此只需选择一个文件扩展名，然后删除其他文件。

现在我们已经缩减到只有 .ttf（在本例中），我们可以通过变体进一步缩小所需的字体。例如，如果我确切地知道我只需要 Regular 和 Bold 变体（而不是 Italics），那么我只需要这些字体文件，在 Roboto 的情况下是

Roboto-Regular.ttf
Roboto-Bold.ttf

现在我已经限制了所需的字体文件，可以简单地将它们复制到我的 NativeScript 项目中的 app/fonts 目录中。

如果您使用的是NativeScript Playground，只需创建一个 fonts 目录，然后使用“上传资源”上下文菜单选项上传您的字体文件。

哪个 Font-Family？

所以让我们切换到我正在处理的应用。请记住，我为这个应用选择了 Varela 字体……但是我如何准确地使用该字体？当然是用 CSS！

.some-class {
    font-size: 40;
    font-family: "Varela";
    color: white;
    text-transform: uppercase;
}

虽然这看起来非常简单，但 iOS 和 Android 在 font-family 属性中期望的内容有所不同

iOS 要求 font-family 为字体的确切名称。我能够做到这一点的唯一可靠方法是使用 macOS 上的字体册应用或在 Windows 中双击字体

identify font name in Windows

您会注意到字体名称清楚地显示为我们提供了 Varela。很简单！

但它并不总是那么简单，因此务必始终执行此步骤。

对于 Android，它通常更简单一些。您可以依靠 Android 查看字体的文件名。因此，在本例中为 varela-regular。

我们的 CSS 正在逐渐完善！

font-family: "Varela", "varela-regular";

字体变体

但是我们的变体呢？啊，这就是我们发现问题的地方！对于 iOS，我们只需在 CSS 中指定变体，如下所示

font-weight: bold;

…但是如果您有单独的字体文件和单独的变体（如上面提到的 Roboto-Bold.ttf），对于 Android，您必须明确引用字体文件的粗体变体，从而创建如下所示的兼容 iOS 和 Android 的类

font-family: "Roboto", "Roboto-Bold";
font-weight: bold;

现在在我的标记中，我可以简单地引用上述类

<Label text="{{ city }}" class="some-class" />

完成！ 🎉

final font output

提示：您可以在NativeScript Playground 中试用此应用！

额外指南：图标字体

自定义字体的另一个非常常见的用途是图标。最流行的图像图标集可能是Font Awesome，但还有许多其他您可以使用的图标集。

对于图标字体，说明与上述完全相同！唯一的区别在于文本输出。解决此问题有两种方法

使用NativeScript 插件，该插件旨在简化图标字体的使用。
或者，查找要显示的 Unicode 值。

对于 Font Awesome，我们可以从主列表中查找图标并获取 Unicode 值

font awesome unicode

复制该值并将其粘贴到 NativeScript UI 元素的 text 属性中，并使用关联的 CSS 类名，如下所示

.fa {
    font-family: "Font Awesome 5 Free", "fa-solid-900";
}

<Label text="&#xf185;" class="fa" />

…它将根据请求呈现一个漂亮的图标

font awesome sun icon

总结

希望本指南能帮助您在 NativeScript 中开始使用自定义字体。如果您遇到任何问题，请务必查阅我们的文档——或者如果您有任何自己的提示，请在评论中发表意见！

快乐 NativeScripting！ 😀