[英]Custom Fonts in Ionic3
我正在使用Ionic3
:
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a
我有以下字體: Ormont_Light.ttf
如您所見,我嘗試在app.scss
文件中應用此新字體。 但是,我似乎無法讓它生效。
如您所見,它仍然使用Ionic默認值:
font-family: "Roboto", "Helvetica Neue", sans-serif;
題
請問任何人都可以建議如何使用Ionic 3中的ttf
文件實現新字體?
UPDATE
我添加以下內容:
@font-face {
font-family: Ormont_Light;
src: url(../assets/fonts/Ormont_Light.ttf) format("ttf");
font-weight: normal;
font-style: normal;
}
body {
font-family: Ormont_Light !important;
}
現在我得到了源代碼中顯示的字體:
body {
font-family: Ormont_Light !important;
}
但它沒有像預期的那樣在全球范圍內應用於應用程序。
UPDATE
variables.scss
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
謝謝,那種作品。 它現在正在應用Ormont_Light
我所有的風格都很棒。 即現在的dom
:
body {
font-family: Ormont_Light !important;
}
但顯示的字體使用Times New Roman
字體,我猜這是瀏覽器的默認字體,因為它找不到引用的字體。 所以我想我的.ttf
文件路徑不正確。
你在哪里保存.ttf
檔案?
您需要覆蓋Ionic Sass變量 。 您需要在src/theme/variables.scss
添加此font-face。
@font-face {
font-family: 'Ormont_Light';
src:url('../assets/fonts/Ormont_Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.