fylgja fontface
v2.1
Fylgjaフォントフェイスミックスは、フォントを簡単にロードできます。
必要なすべての設定を自動的に優れたフォントフェイスに設定します。必要に応じて構成可能です。
npm i -D @fylgja/fontfaceフォントフェイスパッケージをコードに含めます。
utilkitパッケージをコードに含めます。
@import " @fylgja/fontface " ; // (DartSass, LibSass 3.6)
@import " @fylgja/fontface/index " ; // old wayフォントをロードします。フォントフェイスミキシンを呼び出します。フォントの名前 +フォントの接尾辞を追加します。
他のすべての手順は、Mixinによって自動的に作成されます（configを参照）。
入力：
@include font-face ( " Roboto " , " Bold Italic " );出力：
@font-face {
font-family : "Roboto" ;
src :
local ( "Roboto Bold Italic" ) ,
local ( "Roboto-BoldItalic" ) ,
url ( "../fonts/Roboto-BoldItalic.woff2" ) format ( "woff2" ) ,
url ( "../fonts/Roboto-BoldItalic.woff" ) format ( "woff" );
unicode-range : "U+0000—00FF" ;
font-weight : 700 ;
font-style : italic;
font-display : swap;
}フォントごとに渡すことができるMixinオプションを除いて、実際の構成はありません。
ほとんどのオプションは入力されます。デフォルト値に任せた場合。
このため、特定のオプションを呼び出すことをお勧めします。代わりに、完全なMixinオプションを変更します。オプションに到達するまで、変更する必要があります。
例;
悪い方法：
@include font-face ( " Roboto " , " Regular " , 400 , " U+0-10FFFF " , " ../assets " );良い方法：
@include font-face ( " Roboto " , " Regular " , $path : " ../assets " );| オプション | デフォルト値 | 説明 |
|---|---|---|
$name | フォントファミリーの名前 | |
$suffix | ヌル | 接尾辞（例：通常または太字） |
$styles | $サフィックス | スタイル（例：700iまたは700イタリック） |
$unicode | $ u-latin | フォントフェイスのユニコード範囲。 |
$path | '../fonts' | フォントファイルへのパス |
$file-name | ヌル | フォントのファイル名 |
$formats | ローカル、woff2、woff | フォントフェイスのファイル形式。 |
$load | スワップ | フォントのロードオプション |
オプションがnullの場合、フォントフェイスのデフォルトによって入力されます
オプションがない場合。 plzは機能リクエストを残します。
foreachループを介して、ロボットフォントスタック全体をロードできます。
$fonts-roboto : (
" Light " ,
" Light Italic " ,
" Regular " ,
" Italic " ,
" Bold "
);
@each $styles in $fonts-roboto {
@include font-face ( " Roboto " , $styles );
}このミックスインを使用して、フォントアイコンライブラリもロードできます。上記のようにミックスインを呼び出すだけです。ただし、接尾辞フィールドをnullのデフォルト値まで残します。
@include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " );または、 'Regular'の接尾辞値を使用します
@include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );これはデフォルトで次のように設定されます。
アイコンライブラリにはラテン語とは異なるため、 $unicodeを設定する必要があります。 Unicodeのデフォルトは、すべてユニコードであるU+0-10FFFFです。
これは、最初のパブリッシュに付属する小さなことです。悲しいことに、これはレポに固執しています。
しかし、私はこれを変更するつもりはありません。それ以来、私はこれを非難し、新しいフォントフェイスリポジトリを再公開しなければなりません。
可変フォントを使用することを計画している場合、これは必要ありません。
これにより、フォントファミリーの読み込みが簡単になり、1つのフォントフェイスだけが過剰に殺されます。
