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글꼴을로드합니다. 글꼴 핀 믹스에 전화하십시오. 글꼴의 글꼴 이름 + 접미사를 추가하십시오.
다른 모든 단계는 Mixin에 의해 자동으로 생성됩니다 (구성 참조).
입력:
@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;
}믹스 옵션을 제외하고는 글꼴 당 전달할 수있는 실제 구성이 없습니다.
대부분의 옵션이 채워집니다. 기본값에 남겨진 경우.
이러한 이유로 특정 옵션을 호출하는 것이 좋습니다. 대신 전체 믹스 옵션을 변경합니다. 옵션에 도달 할 때까지 변경해야합니다.
예제;
나쁜 방법 :
@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 );
}이 Mixin을 사용하여 글꼴 아이콘 라이브러리를로드 할 수 있습니다. 위의 설명대로 믹스 인을 전화하십시오. 그러나 접미사 필드를 기본 값의 NULL 로 남겨 두십시오.
@include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " ); 또는 'Regular' 의 접미사 값을 사용하십시오.
@include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );이것은 기본적으로 다음을 설정합니다.
아이콘 라이브러리는 단지 라틴어보다 다른 것이기 때문에 여전히 $unicode 설정해야합니다. 유니 코드의 기본값은 모든 유니 코드 인 U+0-10FFFF 입니다.
이것은 첫 번째 출판물과 함께 제공된 작은 것입니다. 슬프게도 이것은 repo에 붙어 있습니다.
그러나 나는 이것을 바꿀 계획이 아니며, 그 이후로 나는 이것을 감가 상각하고 새로운 글꼴 페이스 레포를 다시 발사해야합니다.
가변 글꼴을 사용하려는 경우 필요하지 않습니다.
이로 인해 글꼴을 적재하는 것을 더 쉽게로드하고 한 번의 글꼴만으로 과도하게 죽입니다.
