Question

我知道之前在以下链接中提出并回答了这个问题。我想更改默认字体而不必添加到每个CSS。

我尝试过的事情：

直接更改.tff，.eot，.woff，.svg文件以合并我的字体和离子
尝试通过在html和css文件中指定字体来实现字体（它可以工作，但我希望它是默认的）
用open-sans字体覆盖www / lib / ionic / fonts（离子消失）
当我使用第一个链接时（所有格式都消失了，只剩下文字和按钮）我也尝试将字体 - 面部放在scss / ionic.app.scss的顶部和底部

请帮忙！我看到的答案是说明，但没有解释它是如何工作的。我不知道＆＃34;离子设置如何使用＃34;工作/它的作用。 gulp如何参与其中。

https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459

https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729

Answer 1

Ionic 2的正确解决方案应该是更改$font-family-base variable及其朋友。这就是Ionic做这件事的方式。它为您提供了更多控制（比如每个平台使用不同的字体），它避免使用!important关键字，这总是一件好事。

使用Ionic 3.3，转到variables.scss并找到“共享变量”部分。添加以下行：

$font-family-base: 'MyFont';
$font-family-ios-base: 'MyFont';
$font-family-md-base: 'MyFont';
$font-family-wp-base: 'MyFont';

Answer 2

将所有 font files 导入您的应用。

示例：

@font-face {
    font-family: 'Lato-Light';
    src: url('../fonts/Lato-Light.eot') format('embedded-opentype'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

如果您想在整个应用中使用此字体，请按照这样的方式

* {
    font-family: 'Lato-Light' !important;
}

如果您有任何疑问，请告诉我。谢谢

Answer 3

对于Ionic 2：从fonts.google.com下载字体并将其粘贴到您的资源文件夹中。现在在您的scss文件中执行以下操作：

@font-face {
font-family: MyFont;
src: url("../assets/fonts/Lato-Regular.ttf");
}

body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'MyFont' !important;
}

Answer 4

您不希望更换图标字体，因此您应该使用CSS3 not（）属性

例如，在app.scss中：

  @import url(https://fonts.googleapis.com/css?family=Varela+Round);

  *:not(ion-icon) {
    font-family: 'Varela Round', sans-serif!important;
  }

Answer 5

对于离子4

有些全局变量在各个组件之间共享。 strlen()是其中之一。将此属性添加到--ion-font-family中:root下的属性中：

variables.scss

离子4文档：Advanced Theming Documentation

Answer 6

您只需将图标包含为svg格式。

这是包含所有最新ionicons的列表：https://github.com/Orlandster1998/ionicons-svg

Answer 7

如上所述，我在 global.scss 文件中添加以下几行有效。它也适用于去除 !important。最初它不起作用，因为我输入的网址不正确。如果您将自定义字体放在 fonts 内的 assets 文件夹中，该文件夹位于 src 文件夹中，则下面的 url 是正确的 url。就我而言，我最初在 url 中犯了一个错误，当我指向 '/fonts/MonumentGrotesk-Mono.ttf' 时，它没有显示错误，而是显示整个应用程序的 Times New Roman 字体。然后更改为正确的网址 '/assets/fonts/MonumentGrotesk-Mono.ttf' 效果很好。

@font-face {
        font-family: 'MonumentGrotesk-Mono';
        src: url('/assets/fonts/MonumentGrotesk-Mono.ttf');
        font-weight: normal;
        font-style: normal;
    }



  * {
      font-family: 'MonumentGrotesk-Mono' !important;
    }

离子变化默认字体

7 个答案:

对于离子4