如何全局更改离子字体

Question

我正在使用 ionic 版本 3.9.2

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

谷歌搜索了一下后，我明白我必须在文件夹 app

中的 app.scss 中设置字体。

这是我使用的代码：

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

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

Answer 1

您可以轻松做到 that.But 我强烈建议您不要在线使用 URL，因为您已尝试过。因为当没有 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

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

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

Answer 3

就是这么简单 你只需要在 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;

如何全局更改离子字体

How to change the font on ionic globally

angular

typescript

ionic2

ionic3

google-font-api