无法在 NativeScript 中使用字体图标答案

【问题标题】：Unable to use font icon in NativeScript无法在 NativeScript 中使用字体图标
【发布时间】：2019-09-19 18:19:55
【问题描述】：

我已经从 fontello 下载了一个 tff 图标 - 我将其重命名为 discard - 并将其放置在 vanilla ts nativescript 项目的 app 文件夹内的 fonts 文件夹中：

在我的 xml 中有这个标签：

<Label id="label" text="1U+F1F8" class="discard" />

而app.css 就像这样：

.btn {
    font-size: 18;
}

.discard {
    font-family: "discard";
    font-weight: bold;
}

标签在应该显示图标时显示文本？

文本是 tff 文件的 unicode，我认为这是在 docs 中看到的要求 - 从 Mac 上的字体书中获得：

到目前为止，我也只在 android 上尝试过 - 因为我只需要正确设置文件名。

可能是什么问题？

我在我的原始项目中使用 react-nativescript - 但希望首先让它在 vanilla ts 中工作。最好有一种方法可以在 后面的代码中实现，然后我可以在 react-nativescript 中使用。

【问题讨论】：

另外，On iOS you should use the font family name，文件名可能不起作用。

标签： css fonts nativescript

【解决方案1】：

应用程序将 Unicode 解释为文本，您需要将其设置为 Unicode 文字，如下所示：

<Label text="{{ trashGlyph }}" class="discard"/>

并在您的 ViewModel 中定义垃圾字形：

trashGlyph = "\uf1f8"

或者，如果使用 Angular - 这应该可以完成工作：

<Label id="label" [text]="'\uf1f8'" class="discard" />

【讨论】：

之后什么都没有显示。所以我的tff肯定有问题。我注意到（在 Mac 上）打开字体书以获取 unicode - 它提示我“安装”。这一步有必要吗？我以前从未使用过字体图标。
使用另一个 tff - 它仍然不会显示。
您能否再次检查您尝试显示的字形是否是字体的一部分，并且 unicode 是否正确？这在网络上有效吗？
我访问了fontello.com。已下载。将 .tff 文件拖到字体文件夹中。不知道我将如何在网络中进行测试。还用图片更新了问题。
是的，绑定有效 - 以及后面的代码中的 label.text = "\uf1f8";！

【解决方案2】：

我在我的原始项目中使用react-nativescript - 但希望首先让它在 vanilla ts 中工作。最好有一种方法可以在后面的代码中执行，然后我可以在 react-nativescript 中使用。

@anthares 显然已经为您解决了 NativeScript Core 方面的问题！

我将介绍 React NativeScript 的细节。

这是一个sample repo（实际上是 React NativeScript 入门模板的 repo），展示了如何将字体集成到 React NativeScript 应用程序中（这可能与将字体集成到 NativeScript Core 应用程序中没有什么不同）。我注意到您正在使用 CSS，顺便说一句 - 该 repo 还显示了如何设置 SCSS。

app/components/AppContainer.tsx 展示了如何在 React NativeScript 中使用字形图标：

<$Label row={0} col={0} className="info" horizontalAlignment="center" verticalAlignment="middle">
    <$FormattedString>
        <$Span className="fa" text="&#xf135;"/>
        <$Span text=" MESSAGE"/>
    </$FormattedString>
</$Label>

编辑：请注意，字形图标不必位于 FormattedString Span 内。它可以直接写成<$Label text="&#xf135;"/>，也可以写成<$Label>&#xf135;</$Label>，这取决于JSX 的工作方式。

至少，这就是在 JSX 中将它写成 static 字符串的方法。但是，如果您将 text 属性写为 dynamic 字符串，即：

text={`Some dynamic string`}

... 那么你可能会发现转义规则可能不同（因为它应该遵循该上下文中常规JS语法的规则）。我猜它在这种情况下可能表现得像代码隐藏。

注意：&#xf135; 也可能不是在静态上下文中编写它的唯一方法。我只是碰巧从 NativeScript Vue 示例中复制并粘贴了它，它按原样工作，所以我就用它了。

【讨论】：