作者:儒妹妹_761 | 来源:互联网 | 2023-02-13 15:37
所以我试图在我的Ionic 2应用程序中使用自定义字体,由于某种原因,它显示的内容不正确.
我的字体是GothamRounded,所以我将所有.ttf,.svg,.otf和.eot文件复制到我的Ionic项目的www/fonts文件夹中.
然后,在app.component.scss(我的主要组件)里面我写了这个:
app {
@font-face {
font-family: GothamRounded;
src: url($font-path + "/GothamRounded-Book.ttf");
}
font-family: GothamRounded;
}
现在,当我的应用程序重新加载时,我的字体已经改变,如果我检查一个带有文本的元素,我可以在开发控制台中看到:
app {
font-family: GothamRounded;
}
但显示的文字有一个seriff,我的字体没有,所以我猜这实际上并没有得到真正的字体.
知道可能会发生什么吗?谢谢
1> Gabriel Barr..:
为什么选择应用程序?它只是为了向我们展示代码,或者你在代码中的某处有一个app标签?对我而言
尝试将src设置为所有字体扩展名并使用前面的格式
@font-face {
font-family: GothamRounded;
src: url($font-path + "/GothamRounded-Book.ttf") format('ttf'), url($font-path + "/GothamRounded-Book.otf") format('otf'), ...;
}
我也使用自定义字体而且我的内容不在app.scss文件中的任何其他.scss文件中,所以在我的app.scss里面我有这个:
@font-face {
font-family: 'Humanst';
src: url('../assets/fonts/humanst-webfont.woff2') format('woff2'), url('../assets/fonts/humanst-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'Humanst' !important;
}