移动应用最佳实践 - 使用字体代替图片显示图标
随着 NativeScript 的最新版本发布，您可以在本机移动应用程序中使用网络上大量的图标字体。这适用于跨平台，包括 iOS 和 Android，只需将字体放置在 "app/fonts" 文件夹中并在 UI 中声明要使用的图标即可。NativeScript 框架在幕后完成了它的魔法，因此您无需担心运行的 OS。这只是让您生活更轻松的众多事情之一，并且有助于您重用现有技能/资源。（使用 CSS、本机库、JavaScript 代码和 AngularJS 技能是我们提供给 NativeScript 的其他内容）。
那么，为什么这很重要，为什么使用字体而不是图片文件显示图标是最佳实践呢？
什么是图标字体？
首先，让我们定义什么是图标字体。图标字体只是字体。但是，它们不包含字母或数字，而是包含符号和字形。您可以像使用 CSS 样式化普通文本一样使用 CSS 对它们进行样式化，这使得它们成为网络上的热门选择。
例如，让我们检查一下 Material Design Iconic Font 如果您想使用任何 Google Material Design 图标，这非常有用。
使用图标字体的优势是什么？
与使用图片相比，使用图标字体有很多好处。对我来说，最重要的原因是，由于字体图标是基于矢量的，您不需要处理不同分辨率的不同图片。您只需要增加或减小字体大小属性，您就会看到图标在新的分辨率上完美呈现。如果您要针对多种屏幕尺寸，这将是一个巨大的优势。现在，您只需维护一个字体文件，而不是成堆的图标。
第二个原因是性能。如果您要显示一个项目列表，并且每个项目都包含一个图标，那么，您只需进行一次操作将图标字形作为文本渲染的一部分呈现，而不是读取图片文件，对其进行解码并在屏幕上显示它。
如何使用它？
-
第一步 - 获取字体分发包中包含的 ".ttf" 文件，并将其放置到应用程序中的 "fonts" 文件夹中。
第二步 - 定义一个指定字体族声明的 css 类
.material-icon {
font-family: 'Material-Design-Iconic-Font';
}
第三步 - 在应用程序中的任何位置使用 CSS 声明
<Button text=” Shop” class=”material-icon”/>
它非常简单，不是吗？
等等？ 是什么意思？好问题！
让我们回到备忘单
如您所见，每个图标旁边都有一个参考编号。为了在应用程序中显示图标，您应该将此参考编号与下一个编号内联写入。这就是备忘单如此重要的原因。没有其他方法可以知道如何指定图标。例如，如果您想在应用程序中使用自行车图标，您只需编写以下内容
<Button text=” Shop” class=”material-icon”/>
如果您想使用便笺图标，您猜对了，您只需使用便笺图标的参考编号。<Button text=” Music” class=”material-icon”/>
您可以将字体图标与任何具有字体族属性的元素一起使用。这意味着几乎任何在 NativeScript 中具有 "文本" 属性的元素 - Label、ActionBar、Button、Span 等等。
以下是上述示例在应用程序中的呈现方式
如果您想从 JavaScript 代码中使用图标，您可以使用以下代码
label.text = "\uf10f Music"
基本上，您将 "&#x" 替换为 "\u" 并在末尾跳过 ";"。
您还可以将多个图标用作一个文本块的一部分，但您可能应该在这样做之前咨询您的设计师:）。
我希望您会发现此功能对您的应用程序非常有用。如果您有任何问题，请使用下面的评论部分。