Question

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

Per https://stackoverflow.com/a/41678274/877682，我看到font-family必须与Android上的文件名匹配，所以我将字体文件命名为[Font name] Regular.ttf“和”[Font name] SemiBold.ttf“。

然后我尝试将半粗体通过

包括在内

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

然而，Android无法找到它，默认为sans-serif字体（我假设是Roboto）。

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

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-family: 100; // Light Open Sans
}

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

这样做的好处是您不需要在CSS或HTML中添加其他属性来支持取决于每个设备的字体粗细。

Answer 2

如果没有单独的iOS和Android文件，我从来没有找到办法做到这一点，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对我来说更有意义。

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

2 个答案: