SCSSローカルttfフォントをインポート

Question

私のウェブサイトのためにローカルにTrueTypeフォントをインポートする必要があります。リモートフォントでは、私はいつも

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

が、ファイルからインポートする方法がわからないを使用してい

。

私はそれが非常にシンプルだと信じていますが、私は見つけることができず、結果は良好でした。

あなたはwebfont変換サイトにアクセスし、ローカルの.ttfフォントを持っていけない場合、私はこの1つhttps://onlinefontconverter.com/

が必要な出力形式を選択したいと

Answer 1

ありがとう、私は、.eotを選択推薦します.woff、svgと.ttfを組み合わせてブラウザ間の互換性を確保します。

次に、あなたのscssで、このようなフォントを使用してブラウザの範囲を超えてすべてのバージョンをインポートします。

代わりにフォールバックフォントを追加するのを忘れないでください。

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