fylgja fontface

Fylgja -Fontface

Fylgja Font-Face Mixin使加載字體非常容易。

它將自動設置所有必需的設置，以自動設置良好的字體臉。如果需要，仍然可以配置。

目錄

• 安裝
• 如何使用
• config
• 尖端
  • 環形
  • 圖示
• 常問問題

安裝

npm i -D @fylgja/fontface

如何使用

通過將字體麵包包裝到您的代碼中；

通過將UTILKIT軟件包包括在您的代碼中；

 @import " @fylgja/fontface " ; // (DartSass, LibSass 3.6)
@import " @fylgja/fontface/index " ; // old way

加載字體。致電字體面攪拌。添加您的字體名稱 +字體的後綴。

所有其他步驟將由混合蛋白自動創建（請參閱配置）。

輸入：

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

config

除了您可以通過每個字體傳遞的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	字體面的Unicode範圍。
$path	'../ fonts'	字體文件的路徑
$file-name	無效的	字體的文件名
$formats	本地，沃夫2，沃夫	字體面的文件格式。
$load	交換	字體的加載選項

如果選項為null

如果丟失了選項。請留下功能請求。

尖端

環形

您可以通過foreach循環加載整個Roboto字體堆棧。

 $fonts-roboto : (
    " Light " ,
    " Light Italic " ,
    " Regular " ,
    " Italic " ,
    " Bold "
);

@each $styles in $fonts-roboto {
    @include font-face ( " Roboto " , $styles );
}

圖示

您可以使用此Mixin還加載字體圖標庫。只需如上所述稱為Mixin。但是將後綴字段留在其默認值為空的值中。

 @include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " );

或使用'Regular'的後綴值

 @include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );

默認情況下將設置：

• 字體重量為400
• 字體式達到正常

您仍然必須設置$unicode ，因為圖標庫具有不同的庫，而不僅僅是拉丁文。 Unicode的默認值為U+0-10FFFF這是所有unicodes。

常問問題

為什麼名稱與文件不同

這是第一個出版物所帶來的小事情。可悲的是，這很困擾。

但是，從那時起，我就不會計劃改變這一點，我不得不貶低它並重新發布新的字體臉部存儲庫。

我如何將其與可變字體一起使用

如果您計劃使用可變字體，則不需要此。

這使加載字體 - 含量更容易，並且僅對一個字體面而過度殺死。