无法在NativeScript中使用字体图标

Question

我从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，我认为这是必需的，正如在文档中所示 - 从Mac上的字体书中获取：

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

可能出了什么问题？

我在我的原始项目中使用react-nativescript，但首先希望在vanilla ts中使其工作。最好有一种方法可以在后端代码中完成，然后我就可以在React-NativeScript中使用它。

- lolelo

---

另外，在 iOS 上应该使用字体系列名称，文件名可能无法正常工作。链接 - Manoj

Answer 1

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

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

并在您的ViewModel中定义trashGlyph：

trashGlyph = "\uf1f8"

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

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

- anthares

---

之后就没有任何显示了。所以我的tff肯定有问题。我注意到（在mac上）打开字体书来获取unicode时，它提示我“安装”。这一步是必要的吗？我以前从未使用过字体图标。 - lolelo

使用另一个tff字体 - 仍然无法显示。 - lolelo

你能否再次确认一下你尝试显示的字形是否属于该字体，以及Unicode是否正确？这在网页上是否有效？ - anthares

我访问了http://fontello.com。下载了字体文件并将.tff文件拖到了字体文件夹中。不知道如何在网页中测试。同时，我已经更新了问题并添加了一张图片。 - lolelo

我的错，我刚刚注意到你没有使用Angular，而上面的语法是使用Angular数据绑定语法。对于TypeScript项目，您可以尝试类似这样的东西：<Label text="{{ trashGlyph }}" class="discard"/> 并在您的视图模型中定义一个变量 trashGlyph = "\uf1f8" 作为示例。 - anthares

是的，绑定起作用了 - 以及在代码后台使用 label.text = "\uf1f8";！ - lolelo

Answer 2

我在原始项目中使用react-nativescript，但是现在想先在vanilla ts（即非框架）上运行它。最好有一种方法可以在代码后台完成并且我可以在react-nativescript中使用。
@anthares 明显已经覆盖了NativeScript Core方面的问题！
我将涵盖React NativeScript的具体内容。
这里是一个示例存储库（实际上是React NativeScript入门模板的存储库），展示了如何将字体集成到React NativeScript应用程序中（与将字体集成到NativeScript Core应用程序没有区别）。我注意到你正在使用CSS，顺便说一下-该存储库还显示了如何设置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;"/>，或者根据JSX的工作方式，也可能是<$Label>&#xf135;</$Label>。

至少在JSX中，这就是如何将它写成一个静态字符串。然而，如果你将你的text属性写成一个动态字符串，例如：

text={`Some dynamic string`}

如果您使用的是静态HTML中，则可能会发现转义规则不同（因为它应该遵循该上下文中的常规JS语法规则）。 我猜它在该上下文中的行为类似于代码后置。

注意：在静态上下文中， 不是唯一的编写方式。我只是从NativeScript Vue示例中复制并粘贴，因为它可以正常工作，所以我选择了它。

- Jamie Birch