Ionic 2 中的谷歌字体答案

【问题标题】：Google Fonts in Ionic 2Ionic 2 中的谷歌字体
【发布时间】：2017-05-11 11:45:25
【问题描述】：

我正在尝试在 Ionic 2 中使用 Google 字体。

在研究了 Stackoverflow 和 Ionic 论坛之后，我已经导入了字体并将 base 包含在 variables.scss 中，如下所示

@import url('https://fonts.googleapis.com/css?family=Lato');
$font-family-base: "Lato";
$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";

显然，这不是渲染字体。我做错了什么或者还有什么需要做的？

【问题讨论】：

标签： angular fonts sass ionic2

【解决方案1】：

如果这对任何人都有帮助，我需要在我的 Ionic 2 应用程序中显示 Google 字体。我就是这样实现的：

转到https://fonts.googleapis.com/css?family=Rajdhani

获取woff文件的URL

转到此 URL 并下载 woff 文件。把它放到你的 assets/fonts/ 目录中

编辑app/app.scss并添加

@font-face {
  font-family: 'Rajdhani';
  src: url('../assets/fonts/Rajdhani.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Rajdhani';
}

【讨论】：

【解决方案2】：

根据https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459/8 更改默认 $font-family （顺便说一下，您需要在声明中添加 !default 标签）仅适用于下载的字体。因此，您可以尝试将字体下载到您的应用中，而不是引用 uri。

【讨论】：