如何在 Ionic 2 中使用自定义字体 (ttf-File)？答案

【问题标题】：How do i use a custom Font ( ttf - File ) in Ionic 2 ?如何在 Ionic 2 中使用自定义字体 (ttf-File)？
【发布时间】：2017-02-14 01:32:22
【问题描述】：

我正在尝试在 Ionic 2 中安装和使用自定义字体 ( Chewy.ttf ) 我已经尝试将它与 @font-face { font-family: Chewy; src: url(../../www/assets/fonts/Chewy.ttf); } 一起使用，就像 css 一样在浏览器中它工作得很好但是当我构建它时它不再起作用了感谢您的帮助

【问题讨论】：

标签： angularjs ionic-framework sass ionic2

【解决方案1】：

首先将您的字体文件放在 src/assets/fonts/name.ttf 路径中。然后在 src/app/app.scss

@font-face {
font-family: name;
src: url(../assets/fonts/name.ttf) format("ttf");
font-weight: 200
}
body {
font-family: name !important;
}

【讨论】：

【解决方案2】：

现在你可以使用Google fonts，例如下载这个：https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2

只需将下载的文件复制到文件夹“www/assets/fonts”并根据需要重命名即可。

在 app.scss 文件中复制以下代码：

@font-face {
font-family: "Raleway";
src: url("../assets/fonts/Raleway.woff2") format("woff2");
}

您现在可以使用新字体了

H1 {
font-family : "Raleway";}

【讨论】：

@Inzammalik for ionic 3 将代码复制到文件 variables.scss 中，可以使用任何字体，但一定要获取所有字体文件