离子更改默认字体

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

原文由 Sherlin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将所有 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;
}

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

原文由 Muhsin Keloth 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如上所述，我在 global.scss 文件中添加了以下行。它还可以将 !important 取出。最初它不起作用，因为我输入的网址不正确。如果您将自定义字体放在名为 fonts 的文件夹中，则下面的 url 是正确的 url，在 assets 文件夹中找到该文件夹 src 。在我的情况下，我最初在 url 中犯了一个错误，当我指向 '/fonts/MonumentGrotesk-Mono.ttf' 它没有显示错误，而是显示整个应用程序的 Times New Roman 字体。然后更改为正确的 url '/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;
    }

原文由 Pietro 发布，翻译遵循 CC BY-SA 4.0 许可协议