ionic 2 - Schriftart wird nicht auf iOS angezeigt

Question

Ich versuche, eine App (ionic 2) mit einer benutzerdefinierten Schriftart, Quicksand zu erstellen.

Meine Ordnerstruktur sieht wie folgt aus:

src 
| 
|-app 
| | 
| -app 
| | | 
| | -app.scss 
| | 
| -pages 
| | 
| -assets 
| |  | 
| |  -img 
| |  | 
| |  -fonts 
| |  | | 
| |  | -Quicksand-Bold.ttf 

In meinem app.scss Ich habe den folgenden Code die Schriftart in alle meine Seiten zu machen:

@font-face { 
    font-family: 'Quicksand-Bold'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 

/* latin */ 
@font-face { 
    font-family: 'Quicksand-Bold'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

Dann kann ich es überall Referenz mit font-family: Quicksand-Bold.

Das funktioniert perfekt auf Android und im Browser, aber es kann nicht auf iOS geladen werden.

Ich hatte bereits ein Problem mit:

background: url('../assets/img/background.jpg')

die meine ios app verursacht zum Absturz bringen. Die Problemumgehung, die ich dafür verwendete, war ein div mit dem Bild zu erstellen und es einfach als das Hintergrundbild zu positionieren.

Ich habe das Gefühl, dass das gleiche hier passiert, wenn ich referenziere url("../assets/fonts/Quicksand-Bold.ttf"), dass aus irgendeinem Grund iOS ist nicht in der Lage, den angegebenen Pfad zu finden.

Answer 1

Okay, VICKY ‚s Kommentar nicht mein Problem beantworten, aber ich habe senden, um den richtigen Weg nach oben.

In meiner Frage können Sie sehen, dass ich eine .ttf Datei referenzieren und versuchen Sie es als woff2 zu formatieren. Aber da nur otf und ttf Fonts in iOS unterstützt werden, bricht ein .woff2 Format die Schriftarten. Das richtige Format für eine Datei .ttf ist TrueType.

So Wechsel zu:

src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('truetype'); 

Statt

src: local('Quicksand-Bold'), local('Quicksand-Bold'), url("../assets/fonts/Quicksand-Bold.ttf") format('woff2'); 

gelöst mein Problem. Jetzt kann ich die Schriftarten in meiner iOS App verwenden.