Nativescript 中的 Font Awesome Pro

Posted 2023-04-13

【中文标题】Nativescript 中的 Font Awesome Pro

【英文标题】：Font Awesome Pro in Nativescript

【发布时间】：2019-07-10 02:17:35

【问题描述】：

我正在使用 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 支持人员，但到目前为止，他们无法帮助我。

【问题讨论】：

如果免费版而不是专业版，则很难提供帮助，因为我们无法测试或访问文件

我明白了，有什么我可以做的吗？

【参考方案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 个大字体文件会显着增加应用的大小。

【讨论】：

你的建议正是我想要做的。如何从多个源字体文件中复制字符来创建一个新的字体文件？

有几个网站可以让你这样做；比如fontello.com是我用过几次的。