自定义字体Ionic 2
自定义字体Ionic 2
提问于 2017-01-30 09:05:40
因此，我试图在我的Ionic 2应用程序中使用自定义字体，由于某种原因，它正在显示一些不正确的内容。
我的字体是GothamRounded，所以我在Ionic项目中的www/fonts文件夹中复制所有的.ttf、.svg、.otf和.eot文件。
然后，在app.component.scss (我的主要组件)中，我编写了以下内容：
app {
@font-face {
font-family: GothamRounded;
src: url($font-path + "/GothamRounded-Book.ttf");
}
font-family: GothamRounded;
}现在，当我的应用程序被重新加载时，我的字体已经改变了，如果我检查里面有文本的元素，我可以在dev控制台中看到这一点：
app {
font-family: GothamRounded;
}但是显示的文本有一个seriff，而我的字体没有，所以我猜这不是真正的字体。
知道会发生什么吗？谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-02 13:33:20
为什么选择应用程序？这仅仅是为了向我们展示代码，还是您的代码中确实有一个应用程序标记？对我来说是<ion-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文件的任何其他app.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;
}Stack Overflow用户
发布于 2017-09-07 17:46:15
$regular:'MuseoSans-500';
$bold:'MuseoSans-700';
@each $font-face in $regular,
$bold {
@font-face {
font-family: $font-face;
font-style: normal;
font-weight: normal;
src: url('../assets/fonts/#{$font-face}.eot');
src: url('../assets/fonts/#{$font-face}.eot?') format('eot'),
url('../assets/fonts/#{$font-face}.woff') format('woff'),
url('../assets/fonts/#{$font-face}.ttf') format('truetype'),
url('../assets/fonts/#{$font-face}.svg##{$regular}') format('svg');
}
}
如果您想要添加多个字体，这是有帮助的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41932096
复制相关文章
相似问题
腾讯云开发者
