fylgja fontface
v2.1
Fylgja Font-Face Mixin使加载字体非常容易。
它将自动设置所有必需的设置，以自动设置良好的字体脸。如果需要，仍然可以配置。
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;
}除了您可以通过每个字体传递的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 " );默认情况下将设置：
您仍然必须设置$unicode ，因为图标库具有不同的库，而不仅仅是拉丁文。 Unicode的默认值为U+0-10FFFF这是所有unicodes。
这是第一个出版物所带来的小事情。可悲的是，这很困扰。
但是，从那时起，我就不会计划改变这一点，我不得不贬低它并重新发布新的字体脸部存储库。
如果您计划使用可变字体，则不需要此。
这使加载字体 - 含量更容易，并且仅对一个字体面而过度杀死。
