如何在Ionic2 RC0 / RC1上使用Google字体？

Question

在我的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);

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

知道怎么做吗？也许甚至离线？

Answer 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');
}   

Answer 2

工作解决方案

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

主题/ variables.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;
 }