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

Question

我有两种粗细相同的字体。

根据，我看到字体系列必须与 Android 上的文件名匹配，所以我将字体文件命名为 [字体名称] Regular.ttf”和“[字体名称] SemiBold.ttf".

然后我尝试通过

包含半粗体

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

但是，Android 找不到它，默认为无衬线字体（我假设是 Roboto）。

在这种情况下，预期的字体文件命名系统是什么？我是否需要创建单独的 android 和 ios CSS 文件，然后简单地命名 use font-family: [Font name] Semibold; on android?

Answer 1

如果没有单独的 iOS 和 Android 文件，我从来没有找到一种方法来执行此操作，Android 上每个字体粗细都有 font-family 定义。

由于 Android 需要准确的字体文件名，我不能为所有标签使用默认字体并相应地改变字体粗细，就像我在 iOS.[=19= 上所做的那样]

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 */
}

应用-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 样式移动到平台-ios.css，因为 Android 字体粗细由 font-family 声明控制。

但是，由于我在 app-common.css 中为每个 class 定义了 font-size，因此在这里定义 font-weight 对我来说更有意义。

Answer 2

我认为这里最好的方法是使用 @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 添加更多属性来支持依赖于每个设备的字体粗细。

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

How to include multiple weights of the same font on NativeScript?

android

fonts

font-face

nativescript

android-fonts