如何在 Ionic2 RC0 / RC1 中使用 Google 字体？答案

【问题标题】：How to use Google Fonts with Ionic2 RC0 / RC1?如何在 Ionic2 RC0 / RC1 中使用 Google 字体？
【发布时间】：2016-10-16 01:01:38
【问题描述】：

在我的 app.scss 中我输入了：@import '../theme/variables';

在我的 variables.scss 中我放了：

@import "ionic.globals";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);

但是字体没有加载（我检查了网络流量）。

知道怎么做吗？甚至可以离线？

【问题讨论】：

标签： angular ionic2

【解决方案1】：

这是离线方法。

将 fonts/ 文件夹移动到 www/ 文件夹中，所以看起来像这样。

| scss/
  |-- basics/
    |--_fonts.scss
| www
  |-- fonts/
    |-- SourceSansPro-ExtraLight.ttf
    |-- SourceSansPro-Bold.ttf

然后，如果您不缩小资源，那么路径可能会偏离一级。这应该会修复引用。

@font-face {
    font-family: 'Source Sans Pro', sans-serif;
    src: url('../fonts/SourceSansPro-ExtraLight.ttf');
}

@font-face {
    font-family: 'Source Sans Pro', sans-serif;
    src: url('../fonts/SourceSansPro-Bold.ttf');
}

【讨论】：

在 Ionic RC1 中，我们设计了 assets/fonts 结构。 RollUp 不会复制您的 scss 文件夹。您是如何获得 google ttf 字体的？我在他们的页面上试过，他们不提供 ttf 仅导入语句代码示例。
在ttf中下载字体真的很简单，去fonts.google.com --> 搜索字体 --> 点击它 --> 点击右边的“选择这个字体” side --> 一个弹出窗口将在底部打开 --> 通过单击展开 o=it --> 并单击右侧的下载按钮。文件结构可以改变，但概念保持不变。
好的，我构建了它，链接正确，但字体没有渲染... :(

【解决方案2】：

工作解决方案

根本原因是我使用了.ttf 而不是二进制.woff 文件。

主题/变量.scss

@font-face {
     font-family: 'Source Sans Pro';
     src: url('../assets/fonts/SourceSansPro-Regular.woff');
     font-weight: normal;
     font-style: normal;
 }

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

【讨论】：