【问题标题】：How to include a custom font in ionic 3?如何在 ionic 3 中包含自定义字体？
【发布时间】：2019-01-02 03:09:56
【问题描述】：

自定义字体相关问题。这是我第一次尝试在应用程序中使用自定义字体，但我遇到了很多问题..

例子：我想用这个google字体https://fonts.google.com/specimen/Special+Elite

我已下载此字体并将其放入 /assets/fonts

在 variables.scss 我添加了代码：

@font-face {
  font-family: 'SpecialElite-Regular';
  src:  url('../assets/fonts/SpecialElite-Regular.ttf') format('ttf');
  font-weight: 800;
  font-style: regular;
}

我尝试将此字体应用于所有代码： app.scss

*{
font-family: "SpecialElite" !important;
}

但字体未显示（不在浏览器中，不在应用程序中）。

如何使用自定义字体？

已解决：

我已经包含了不同类型的字体..

variables.scss

@font-face {
  font-family: 'SpecialElite-Regular';
  src:  url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.ttf') format('ttf'), 
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.eot') format('eot'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.svg') format('svg'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.woff') format('woff'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.woff2') format('woff2');
}

我想在哪里使用我的字体

font-family: 'SpecialElite-Regular' !important;

【问题讨论】：

请将您的解决方案移至自己的答案，谢谢。

标签： ionic-framework fonts ionic3

【解决方案1】：

我认为这是因为您尝试使用与您给它的名称不同的名称使用此字体：

*{
font-family: "SpecialElite-Regular" !important;
}

应该做的伎俩

【讨论】：

【解决方案2】：

我已经包含了不同类型的字体。

variables.scss

@font-face {
  font-family: 'SpecialElite-Regular';
  src:  url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.ttf') format('ttf'), 
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.eot') format('eot'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.svg') format('svg'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.woff') format('woff'),
        url( $font-path + '/SpecialElite-Regular/SpecialElite-Regular.woff2') format('woff2');
}

我想在哪里使用我的字体

font-family: 'SpecialElite-Regular' !important;

【讨论】：