notosans fontface
1.0.0
Noto Sans 글꼴 얼굴을 제공하는 간단한 패키지.
글꼴은 모든 브라우저 (IE6/매우 오래된 브라우저까지)를 준수하기 위해 .eot , .woff2 , .woff , .ttf 및 .svg 형식으로 제공됩니다.
# Install via npm
npm install notosans-fontface --save
# Install via yarn
yarn add notosans-fontface
# Install via bower
bower install notosans-fontface --save 사용하려는 각 글꼴 마다이 프로젝트의 fonts 디렉토리에서 글꼴을 복사해야합니다.
예를 들어, NotoSans Regular 글꼴의 경우 필요한 파일은 다음과 같습니다.
NotoSans-Regular.eotNotoSans-Regular.woff2NotoSans-Regular.woffNotoSans-Regular.ttfNotoSans-Regular.svg 최신 패키지 참조는 woff2 글꼴 파일 만 있습니다.
패키지는 즉시 사용 가능한 css , less , scss 및 styl 파일입니다.
각 패키지의 경우 구성된 디렉토리에 모든 .eot , .woff2 , .woff , .ttf 및 .svg 글꼴 파일을 제공해야합니다.
Less 또는 SCSS 패키지 파일을 사용하는 경우 notosans-fontface-path 변수를 무시할 수 있습니다. 이 변수는 글꼴이 저장되는 디렉토리를 구성하고 기본값은 ../fonts 입니다.
// my-website/style.less
@notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/less/notosans-fontface " ;
body {
font-family : " Noto Sans " , sans-serif ;
} // my-website/style.scss
$notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/scss/notosans-fontface " ;
body {
font-family : " Noto Sans " , sans-serif ;
}"필수"패키지에는 페이지를 렌더링하기위한 최소 NOTO SANS 글꼴이 포함되어 있습니다.
이 패키지에는 다음 글꼴이 포함되어 있습니다.
사용 가능한 파일은 다음과 같습니다.
css/notosans-fontface.css 필수 패키지가 CSS에 편집되었습니다css/notosans-fontface.min.css CSS에 필수 패키지scss/notosans-fontface.scss SCSS의 필수 패키지less/notosans-fontface.less 필수 패키지가 적습니다 woff2 글꼴 파일 만 참조하는 최신 변형도 있습니다.
css/notosans-fontface-modern.css 현대 필수 패키지는 CSS에 편집되었습니다css/notosans-fontface-modern.min.css 현대 필수 패키지는 CSS에 미니버 팅됩니다scss/notosans-fontface-modern.scss SCSS의 현대 필수 패키지less/notosans-fontface-modern.less 최신 필수 패키지 "모든 무게"패키지에는 모든 정상적인 Noto Sans 글꼴이 포함되어 있습니다.
이 패키지에는 다음 글꼴이 포함되어 있습니다.
사용 가능한 파일은 다음과 같습니다.
css/notosans-fontface-allweight.css 전세 패키지는 CSS로 컴파일됩니다
css/notosans-fontface-allweight.min.css CSS에 대한 전량 패키지
scss/notosans-fontface-allweight.scss SCSS의 전세 패키지
less/notosans-fontface-allweight.less 전세 패키지가 적습니다
woff2 글꼴 파일 만 참조하는 최신 변형도 있습니다.
css/notosans-fontface-modern-allweight.css CSS로 편집 된 최신 전량 패키지
css/notosans-fontface-modern-allweight.min.css CSS에 미니던트 중량 패키지
scss/notosans-fontface-modern-allweight.scss SCSS의 현대적인 전량 패키지
less/notosans-fontface-modern-allweight.less 최신 전세 패키지
이 프로젝트에 제공된 적은, SCSS 또는 스타일러스 믹스 인을 사용하여 자신만의 Noto Sans 글꼴과 자신의 글꼴 세트를 만들 수 있습니다.
fontface 또는 notosans-fontface mixins를 사용하면 구성된 디렉토리에 모든 .eot , .woff2 , .woff , .ttf 및 .svg 파일을 제공해야합니다. 최신 변형 fontface-modern 또는 notosans-fontface-modern Mixin을 사용하는 경우 구성된 디렉토리에 .woff2 파일 만 제공하면됩니다.
notosans-fontface 또는 notosans-fontface-modern Mixins에 대해 notosans-fontface-path 변수를 재정의 할 수 있습니다.
// my-website/style.less
@notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/less/mixins " ;
.notosans-fontface ( " Regular " , 400 , normal );
.notosans-fontface ( " Italic " , 400 , italic );
.notosans-fontface ( " Bold " , 700 , normal );
.notosans-fontface ( " BoldItalic " , 700 , italic );
// .notosans-fontface-modern("Regular", 400, normal);
// .notosans-fontface-modern("Italic", 400, italic);
// .notosans-fontface-modern("Bold", 700, normal);
// .notosans-fontface-modern("BoldItalic", 700, italic);
.fontface ( " Noto Sans CJK JP " , " fonts/JP/ " , " NotoSansCJKjp " , " Regular " , 400 , normal );
.fontface ( " Noto Sans CJK JP " , " fonts/JP/ " , " NotoSansCJKjp " , " Bold " , 700 , normal );
// .fontface-modern("Noto Sans CJK JP", "fonts/JP/", "NotoSansCJKjp", "Regular", 400, normal);
// .fontface-modern("Noto Sans CJK JP", "fonts/JP/", "NotoSansCJKjp", "Bold", 700, normal);
body {
font-family : " Noto Sans " , " Noto Sans CJK JP " , sans-serif ;
} // my-website/style.scss
$notosans-fontface-path : " fonts/Noto/ " ;
@import " notosans-fontface/scss/mixins " ;
@include notosans-fontface ( " Regular " , 400 , normal );
@include notosans-fontface ( " Italic " , 400 , italic );
@include notosans-fontface ( " Bold " , 700 , normal );
@include notosans-fontface ( " BoldItalic " , 700 , italic );
// @include notosans-fontface-modern("Regular", 400, normal);
// @include notosans-fontface-modern("Italic", 400, italic);
// @include notosans-fontface-modern("Bold", 700, normal);
// @include notosans-fontface-modern("BoldItalic", 700, italic);
@include fontface (
" Noto Sans CJK JP " ,
" fonts/JP/ " ,
" NotoSansCJKjp " ,
" Regular " ,
400 ,
normal
);
@include fontface (
" Noto Sans CJK JP " ,
" fonts/JP/ " ,
" NotoSansCJKjp " ,
" Bold " ,
700 ,
normal
);
// @include fontface-modern(
// "Noto Sans CJK JP",
// "fonts/JP/",
// "NotoSansCJKjp",
// "Regular",
// 400,
// normal
// );
// @include fontface-modern(
// "Noto Sans CJK JP",
// "fonts/JP/",
// "NotoSansCJKjp",
// "Bold",
// 700,
// normal
// );
body {
font-family : " Noto Sans " , " Noto Sans CJK JP " , sans-serif ;
} // my-website/style.styl
$notosans-fontface-path = "fonts/Noto/"
@import "notosans-fontface/styl/mixins"
notosans-fontface ( "Regular" , 400 , normal )
notosans-fontface ( "Italic" , 400 , italic )
notosans-fontface ( "Bold" , 700 , normal )
notosans-fontface ( "BoldItalic" , 700 , italic )
// notosans-fontface-modern("Regular", 400, normal)
// notosans-fontface-modern("Italic", 400, italic)
// notosans-fontface-modern("Bold", 700, normal)
// notosans-fontface-modern("BoldItalic", 700, italic)
fontface(
"Noto Sans CJK JP" ,
"fonts/JP/" ,
"NotoSansCJKjp" ,
"Regular" ,
400,
normal
)
fontface(
"Noto Sans CJK JP" ,
"fonts/JP/" ,
"NotoSansCJKjp" ,
"Bold" ,
700,
normal
)
// fontface-modern(
// "Noto Sans CJK JP",
// "fonts/JP/",
// "NotoSansCJKjp",
// "Regular",
// 400,
// normal
// )
// fontface-modern(
// "Noto Sans CJK JP",
// "fonts/JP/",
// "NotoSansCJKjp",
// "Bold",
// 700,
// normal
// )
body {
font-family : "Noto Sans" , "Noto Sans CJK JP" , sans-serif
}
