项目结构
字体文件夹
用于存储自定义字体的文件夹。此处放置的任何 .ttf 文件都会被 NativeScript 自动获取。
使用自定义字体
将 .ttf 文件放置在 src/fonts 文件夹中，然后运行
ns fonts结果是一个表格，其中包含字体文件名和您可以复制/粘贴到您的 css 中的必要 CSS 属性
| 字体 | CSS 属性 |
|---|---|
albert-sans-700.ttf | font-family: "Albert Sans", "albert-sans-700"; font-weight: 700; |
fa-regular-400.ttf | font-family: "Font Awesome 5 Free", "fa-regular-400"; font-weight: 400; |
添加一个新的 css 类（例如在 app.css 中），并使用表格中的 CSS 属性（类的名称可以是任何名称）
.font-albert-sans {
font-family: "Albert Sans", "albert-sans-700";
font-weight: 700;
}
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}注意
使用 ns fonts 是可选的，但我们建议使用它，因为 iOS 和 Android 对 .ttf 文件的识别方式不同。在 Android 上，字体通过其 文件名 识别，而在 iOS 上则通过其 字体名称 识别。字体名称与文件名不同的字体必须在 CSS 规则中使用这两个名称进行注册。
您已准备好使用新字体，将字体类应用于元素，它将使用新字体。
<Label class="font-albert-sans" text="The quick brown fox jumps over the lazy dog"></Label>字体图标
对于字体图标，您需要将 text 设置为图标的正确字符代码，例如 ，或者在 Image 的情况下，您可以使用 font:// 方案作为 src。
<Label class="far" text=""></Label>
<Image class="far" src="font://"></Image>Vue 用户注意事项
在 Vue 中，当使用像上面字符代码这样的 HTML 实体时，请在属性上使用 .decode 修饰符，在本例中为 text.decode 和 src.decode，以选择加入解析 HTML 实体（默认情况下禁用）。
<Label class="far" text.decode="" />
<Image class="far" src.decode="font://" />调整字体图像大小
图像具有特定的拉伸选项（none、aspectFit、aspectFill）。另一方面，字体图标通常使用 font-size 来控制图标的大小。使用 Image 时，您可以使用 font-size 控制大小，但您需要将其 stretch 设置为 none 才能生效。将 stretch 设置为除 none 之外的任何值会导致图标通过测量图像进行拉伸。
如果图标没有出现或渲染了意外的字符，请确保您使用了正确的字体系列和粗细。
字体图标与图像
在许多情况下，字体图标是图像的理想替代品，因为它们有一些缺点
- 放大时出现像素化/质量下降
- 可能需要额外的 http 请求才能获取
- 嵌入时会增加应用程序的大小
另一方面，字体图标
- 缩放良好
- 不需要额外的 http 请求
- 不会显着增加内存使用量
但是字体图标有一个限制，它们只能具有单一颜色。
其他资源
- 上一页
- src/
- 下一页
- app.css•scss
