自定义字体离子2

所以我试图在我的离子2应用程序中使用自定义字体，并出于某种原因它显示的内容不正确。自定义字体离子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; 

}

现在，当我的应用程序重新加载，我的字体已经改变，如果我检查元素与文本内我可以在开发者控制台中看到这一点：

app { 
    font-family: GothamRounded; 
}

但显示的文本有seriff，和我的字体doesn't，所以我猜测这是不是真正得到真正的字体。

任何想法可能发生什么？谢谢

来源

2017-01-30 David

一般资源转到src/assets文件夹。你的字体应该在src/assets/fonts文件夹中，并设置'src：url（'./ assets/fonts/GothanRounded-Book.ttf'）'。什么是$ font-path？ –

$ font-path正好是variables.scss中定义的一个变量'''$ font-path：“../ assets/fonts”;''' – David

尝试使用'。/ assets/fonts'此路径适用于我图像..一个双点意味着父文件夹 –

为什么选择应用程序？它只是为了向我们展示代码，或者你真的在你的代码中有一个应用标签？对于我来说，<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'), ...; 
}

我使用自定义字体也和我没有任何内部的其他工作.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; 
}

来源

2017-02-02 13:33:20

嗯，似乎诀窍是格式woff，我把它包括在内，一切正常。你的答案实际上解决了问题，所以谢谢！ – David

很高兴帮助：D –

在variables.scss上，您可以覆盖变量$ font-family-base。 – topless

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

如果您想添加多个字体，这很有用。

来源

2017-09-07 17:46:15 yanioconjota

自定义字体离子2

回答

相关问题