Question

我正在使用离子版3.9.2

我想要实现的是我想将离子应用程序的所有默认字体更改为我给定的自定义字体。

谷歌搜索后，我明白我必须在文件夹app.scss

中的app中设置字体。

这是我使用的代码：

@import url('https://fonts.googleapis.com/css?family=Raleway');
$font-family-base: "Raleway", sans-serif !default;

然而即使这样做之后我也无法改变整个应用的字体，因为它没有反映在应用中。

Answer 1

您可以轻松地执行此操作。但我强烈建议您不要使用在线网址。因为当没有wifi时，你的应用程序不会显示特定的字体。因此，请始终将字体安装到您的设备中并使用它。

我在这里展示了如何安装Lato-Regular。对于任何字体，此过程都是相同的。

variables.scss

    @font-face {
        font-family: "Lato-Regular";
        src: url($font-path+'/lato/Lato-Regular.ttf');
    }

   $font-family-base: "Lato-Regular";

app.scss

* {
    font-family: $font-family-base;
}

就是这样。在这里，您可以看到great video about it。如果您有任何问题，请告诉我。

Answer 2

这么简单 你只需要在 theme / variable.scss 上添加这些行，就是这样

@import "roboto";
@import "noto-sans";
@import "../assets/fonts/quickSand.scss"; // this one I used for my app


$font-family-base: 'Quicksand';
$font-family-md-base: "Quicksand";
$font-family-ios-base: "Quicksand";
$font-family-wp-base: "Quicksand";
$font-size-base:  14px;

Answer 3

在头部添加所有必要的字体和链接，然后将样式应用于放置在离子3项目的src文件夹中的index.html文件的以下部分

 <ion-app style="Whatever rules you want !font-family:family;"></ion-app>

如何在全局上更改离子上的字体

3 个答案: