自定義字體在Ionic3

我使用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應用此新的字體文件。但是，我似乎無法使其生效。

正如你所看到的，它依然使用的離子默認：

font-family: "Roboto", "Helvetica Neue", sans-serif;

問題

請誰能告訴我如何使用ttf實施新的字體文件在離子3？

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文件？

來源

2017-04-19 Richard

感謝您對此的更新。它非常幫助我 – RobIsAnxious

查看關於overriding SASS variables的部分。

你需要重寫

$font-family-base在variable.scss。

如果你想要它是android/ios特定覆蓋： $font-family-md-base或 $font-family-ios-base分別。

嘗試：

$font-family-base: Ormont_Light

來源

2017-04-19 09:13:00

你需要重寫Ionic Sass Variables。您需要在src/theme/variables.scss中添加此字體。

@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;

來源

2017-04-19 09:14:53 Math10

自定義字體在Ionic3

回答

相關問題