notosans fontface

noto sans font face

一個簡單的包裝，可提供noto sans font臉部。

這些字體可在.eot ， .woff2 ， .woff ， .ttf和.svg格式中提供，以便符合所有瀏覽器（從IE6/非常古老的OIOS到現代瀏覽器）。

先決條件

• nodejs，
• NPM或紗線或Bower。

安裝

 # 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.eot
• NotoSans-Regular.woff2
• NotoSans-Regular.woff
• NotoSans-Regular.ttf
• NotoSans-Regular.svg

現代軟件包參考僅woff2字體文件。

軟件包

軟件包是可用的css ， less ， scss和styl文件。

對於每個軟件包，您需要在配置的目錄中提供所有.eot ， .woff2 ， .woff ，.WOFF， .ttf和.svg字體文件。

如果您使用的是較少或SCSS軟件包文件，則可以在導入NotoSans-Fontface之前覆蓋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 ;
}

基本包

“ Essential”軟件包包含最低限度的字體來渲染您的頁面。

該軟件包包含以下字體：

• Notosans常規
• Notosans斜體
• Notosans大膽
• Notosans Bolditalic

可用文件是：

• 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 nono nnos ins fonts。

該軟件包包含以下字體：

• Notosans瘦
• Notosans薄薄荷
• Notosans外觀
• Notosans外觀外
• Notosans的光
• Notosans Lightalitic
• Notosans常規
• Notosans斜體
• Notosans培養基
• Notosans中型
• Notosans Semibold
• Notosans semibittalic
• Notosans大膽
• Notosans Bolditalic
• Notosans雜物
• Notosans外義大利
• Notosans黑色
• Notosans Blackitalic

可用文件是：

• 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現代全重量套件

風俗

可以通過使用Limes，SCSS或該項目中提供的少量SCSS或手寫筆Mixins來製作自己的Noto sans字體和自己的字體，

當您使用fontface或notosans-fontface Mixins時，您需要在配置的目錄中提供所有.eot ， .woff2 ， .woff ，.woff， .ttf和.svg文件。如果您使用現代變體fontface-modern或notosans-fontface-modern Mixins，則只需要在配置的目錄中提供.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 ;
}

SCSS Mixins

 // 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
}