Nativescript 中的 Font Awesome Pro

Question

我正在使用 Nativescript 开发一个跨平台应用程序，并且我开始使用 Font Awesome Free 作为图标。 为此，我将 ttf 文件包含在字体文件夹中，并在主 css 文件中定义了以下类：

.far {
    font-family: "Font Awesome 5 Free", fa-regular-400;
    font-weight: 400; 
}

.fab {
    font-family: "Font Awesome 5 Brands", fa-brands-400;
    font-weight: 400; 
}

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

到目前为止一切正常，我可以通过它们的 Unicode 在文本字段中插入免费图标，并将类 far、fab 或 fas 分配给小部件。

这是一个例子：

<Button value="4" row="1" col="4" text="&#xf3ed;" class="fas navbar-item" tap="onMenuItemTap"></Button>

我尝试与 Fontawesome Pro 相同，在 Fonts 文件夹中添加 otf 文件并定义以下类，但它不起作用。

.far {
    font-family: "Font Awesome 5 Pro", fa-regular-400;
    font-weight: 400; 
}

.fab {
    font-family: "Font Awesome 5 Brands", fa-brands-400;
    font-weight: 400; 
}

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

.fal {
    font-family: "Font Awesome 5 Pro", fa-light-300;
    font-weight: 300; 
}

你能帮我解决这个问题吗？我联系了 FA 支持人员，但到目前为止，他们无法帮助我。

Answer 1

此时 NativeScript 无法支持同一字体名称的多个粗细。

参见https://github.com/NativeScript/NativeScript/issues/5920——当前的解决方案是手动重命名字体内部名称（使用字体编辑器），使其具有不同的名称。那么你的 CSS 看起来像这样（即字体系列已经更新了名称）

.far {
    font-family: "Font Awesome 5 Pro", fa-regular-400;
    font-weight: 400; 
}

.fas {
    font-family: "Font Awesome 5 Pro Solid", fa-solid-900;
    font-weight: 900; 
}

.fal {
    font-family: "Font Awesome 5 Pro Light", fa-light-300;
    font-weight: 300; 
}

一张小纸条；如果您只使用这些字体文件中的几个字符，最好将所有这些字符复制到您自己的字体文件中。捆绑 4 个大字体文件会显着增加应用的大小。