Question

在ionic3项目的文件variables.scss中，它导入了两种字体：roboto和noto-sans，如下所示：

@import "roboto";
@import "noto-sans";

这些字体来自哪里？如何导入raleway字体？我试图把这一行放在一边，但它不起作用：

@import "raleway";

Answer 1

所以我刚检查了node_modules，roboto和noto-sans字体存储在node_modules/ionic-angular/fonts/

如果您想使用raleway字体，则应该拥有.ttf，.woff和.woff2个文件。如果您只有.ttf字体，请查看FontSquirrel's font files generator

位置：src/assets/fonts/Raleway.ttf等。

然后您可以创建字体（app.component.scss或variables.scss）

@font-face {
    font-family: 'Raleway';
    font-weight: 200;
    src: url('../assets/fonts/Raleway.ttf') format('truetype');
    src: url('../assets/fonts/Raleway.woff') format('woff');
    src: url('../assets/fonts/Raleway.woff2') format('woff2');
}

现在您可以使用您的字体：

p { font-family: "Raleway" !important; }

或更改离子应用的默认字体（variables.scss）

$font-family-md-base: "Raleway";
$font-family-ios-base: "Raleway";
$font-family-wp-base: "Raleway";

Answer Credit

在变量中导入ionic3字体

1 个答案: