SCSS Import lokaler TTF-Schriftart

Question

Ich muss TrueType-Schriftart lokal für meine Website importieren.

Für die Remote-Fonts Ich bin immer

@import url('https://example'); 

aber nicht sicher, verwenden, wie es von Dateien zu importieren.

Ich glaube, es ist sehr einfach, aber ich konnte nicht finden und ein gutes Ergebnis.

Danke

Answer 1

Wenn Sie einen lokalen Ttf Schrift nicht haben, zu einer WebFont Umwandlungsort gehen, Ich mag dieses https://onlinefontconverter.com/

die Ausgabeformate Sie müssen wählen, würde ich empfehlen, die Auswahl .eot, .woff und svg zusammen mit Ihrer .ttf für Cross-Browser-Kompatibilität.

Dann in Ihrem scss, verwenden Sie so etwas, um alle Versionen dieser Schriftart für die browserübergreifende Abdeckung zu importieren.

Vergessen Sie nicht, Fallback-Fonts nur hinzufügen.

@mixin font($font-family, $font-file) { 
 
    @font-face { 
 
    font-family: $font-family; 
 
    src: url($font-file+'.eot'); 
 
    src: url($font-file+'.eot?#iefix') format('embedded-opentype'), 
 
    url($font-file+'.woff') format('woff'), 
 
    url($font-file+'.ttf') format('truetype'), 
 
    url($font-file+'.svg#aller') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    } 
 
} 
 

 

 
@include font('Arvo', '/htdocs/lib/fonts/Arvo'); 
 
@include font('Arvo-Bold', '/htdocs/lib/fonts/Arvo-Bold'); 
 

 

 
h1 { 
 
    font-family: Arvo-Bold, Arial-bold, arial, sans-serif; 
 
}

<h1>Hey Look! A headline in Arvo bold!</h1>