如何在NativeScript中包含同一字体的多个字重？

Question

我有两个相同字体的字重。

根据https://dev59.com/EJ7ha4cB1Zd3GeqPfTD5#41678274，我了解到在Android上，字体名称必须与文件名匹配，所以我将字体文件命名为"[字体名称] Regular.ttf"和"[字体名称] SemiBold.ttf"。

然后我尝试通过以下方式包含半粗体：

font-family: [Font name];
font-weight: 600;"

然而，Android 找不到它，会默认使用无衬线字体（我认为是 Roboto 字体）。

在这种情况下，期望的字体文件命名系统是什么？我需要创建单独的 Android 和 iOS CSS 文件，然后在 Android 上简单地使用 font-family：[字体名称] Semibold; 吗？

- Aaron

---

我认为对于Android来说，它必须与文件名匹配。此外，这些文件必须位于app/fonts文件夹中。 - dashman

我明白，我只是不明白如何与iOS字体家族要求相协调，以满足同一字体的多个权重需求。 - Aaron

Answer 1

我认为在这里最好的方法是使用@font-face来创建一个字体系列，包含所有你的文件。

如果我有三种字重的字体，并且想要将它们组合成一个字体系列，我会这样做：

@font-face {
    font-family: 'Open Sans';
    src: url('~/fonts/Open Sans Regular.tff') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Open Sans';
    src: url('~/fonts/Open Sans Light.tff') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'Open Sans';
    src: url('~/fonts/Open Sans Bold.tff') format('truetype');
    font-weight: 500;
}

我可以通过以下方式在其他地方使用它：

Label {
    font-family: 'Open Sans';
    font-weight: 300; // Regular Open Sans
}

Label.mod-light {
    font-weight: 100; // Light Open Sans
}

Label.mod-bold {
    font-weight: 500; // Bold Open Sans
}

这种方法的好处在于，您无需添加更多的属性到CSS或HTML来支持每个设备所依赖的字重。

- N.J.Dawson

Answer 2

我从未找到一种方法可以在没有分别为iOS和Android文件定义每个字重的font-family的情况下完成这个任务。

由于Android需要精确的字体文件名称，我无法像在iOS上那样为所有标签使用默认字体并相应地变化字重。

app.css:

@import "~/platform.css"; /* Platform-dependent styles */
@import "~/app-common.css"; /* Platform-independent styles */

platform.ios.css:

/* Default font: used everywhere except classes below */
Label {
    font-family: "My Body Font"; /* Exact font name */
}

.heading-1, .heading-2, .heading-2-subtext {
    font-family: "My Display Font"; /* Exact font name */
}

platform.android.css:

.heading-1, .heading-2 {
    font-family: "MyDisplayFont-Bold"; /* file name: MyDisplayFont-Regular-Bold.otf */
}

.heading-2-subtext {
    font-family: "MyDisplayFont-Regular"; /* file name: MyDisplayFont-Regular.otf */
}

.heading-3 {
    font-family: "MyBodyFont-SemiBold"; /* file name: MyBodyFont-SemiBold.otf */
}

.body-text {
    font-family: "MyBodyFont-Regular"; /* file name: MyBodyFont-Regular.otf */
}

app-common.css:

.heading-1 {
    font-size: 36;
    font-weight: bold; /* Used by iOS, ignored by Android */
}

.heading-2 {
    font-size: 24;
    font-weight: bold; /* Used by iOS, ignored by Android */
}

.heading-3 {
    font-size: 16;
    font-weight: 600; /* semi-bold, Used by iOS, ignored by Android */
}

.body-text {
    font-size: 14;
}

据我理解，我可以将所有font-weight样式移入platform-ios.css，因为Android的字体重量由font-family声明控制。

然而，既然我已经在app-common.css中为每个类定义了font-size，在这里也定义font-weight对我来说更有意义。

- Aaron