benutzerdefinierten Schriftarten in Ionic3

Question

Ich bin mit 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 

Ich habe die folgende Schrift: Ormont_Light.ttf

Wie man oben sehen kann, versuche ich in der app.scss diese neue Schriftart anwenden Datei. Ich kann jedoch nicht scheinen, dass es Wirkung zeigt.

Wie Sie sehen können, ist es immer noch den Ionic Standard verwenden:

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

Frage

Bitte kann jemand beraten, wie eine neue Schriftart implementieren ein ttf mit Datei in Ionic 3?

UPDATE

I fügen Sie folgendes:

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

Jetzt bekomme ich die Schrift in der Quelle zeigt sich:

body { 
    font-family: Ormont_Light !important; 
} 

Aber es ist nicht auf die Anwendung angewendet wird eine globale Ebene wie erwartet.

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; 

Danke, Diese Art von Arbeiten. Es wendet jetzt Ormont_Light zu allen meinen Arten an, der groß ist. das heißt, die dom jetzt hat:

body { 
    font-family: Ormont_Light !important; 
} 

Aber die angezeigte Schrift Times New Roman Schriftart verwendet, die ich denke, die Standard-Browser ist, wenn es nicht die Schrift verwiesen finden. Also ich denke, mein Pfad zu meiner .ttf Datei ist falsch.

Wo halten Sie Sie .ttf Datei?

Answer 1

Überprüfen Sie den Abschnitt overriding SASS variables.

Sie benötigen

$font-family-base in variable.scss außer Kraft zu setzen.

Falls Sie es android/ios spezifische Überschreibung sein: $font-family-md-base oder $font-family-ios-base sind.

Versuchen:

$font-family-base: Ormont_Light 

Answer 2

Sie müssen die Ionic Sass Variables außer Kraft zu setzen. Sie müssen dieses Schriftbild in src/theme/variables.scss hinzufügen.

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