离子变化默认字体

Question

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

我尝试过的事情:

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

请帮忙!我看到的答案是说明,但没有解释它是如何工作的.我不知道"离子设置sass"是如何工作的/它的作用.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 变量及其朋友.这就是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

顺便说一下，您不想替换图标字体，因此您应该使用 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 4

对于离子4

存在跨组件共享的全局变量。--ion-font-family是其中之一。将此添加到以下属性:root中variables.scss：

  :root {
      --ion-font-family: 'MyFont';
  }

Ionic 4 Docs：高级主题文档

Answer 5

对于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;
}