notosans fontface

Noto sans font wajah

Paket sederhana yang menyediakan wajah noto sans.

Font tersedia di .eot , .woff2 , .woff , .ttf dan .svg format agar sesuai dengan semua browser (dari IE6/sangat tua-IOS ke browser modern).

Prasyarat

• NodeJs,
• NPM atau benang atau bower.

Instalasi

 # Install via npm
npm install notosans-fontface --save

# Install via yarn
yarn add notosans-fontface

# Install via bower
bower install notosans-fontface --save

Penggunaan

Untuk setiap font yang ingin Anda gunakan, Anda perlu menyalin font dari direktori fonts proyek ini.

Sebagai contoh, untuk font NotoSans Regular , file yang diperlukan adalah:

• NotoSans-Regular.eot
• NotoSans-Regular.woff2
• NotoSans-Regular.woff
• NotoSans-Regular.ttf
• NotoSans-Regular.svg

Paket modern hanya referensi file font woff2 .

Paket

Paket adalah css siap pakai, less , scss dan file styl .

Untuk setiap paket, Anda perlu menyediakan semua .eot , .woff2 , .woff , .ttf dan .svg file font di direktori yang dikonfigurasi.

Jika Anda menggunakan file paket Less atau SCSS, Anda dapat mengganti variabel notosans-fontface-path sebelum impor notosans-fontface. Variabel ini mengkonfigurasi direktori tempat font disimpan, nilai defaultnya adalah ../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 ;
}

Paket penting

Paket "Essential" berisi minimum noto sans font untuk membuat halaman Anda.

Paket ini berisi font berikut:

• Notosans biasa
• Notosans Italic
• Notosans berani
• Notosans Bolditalic

File yang tersedia adalah:

• css/notosans-fontface.css - Paket penting yang dikumpulkan untuk CSS
• css/notosans-fontface.min.css - Paket Esensial Diperkenalkan ke CSS
• scss/notosans-fontface.scss - Paket Esensial di SCSS
• less/notosans-fontface.less - Paket penting dalam lebih sedikit

Ada juga variasi modern yang hanya merujuk file font woff2 :

• css/notosans-fontface-modern.css -Paket Esensial Modern Disusun ke CSS
• css/notosans-fontface-modern.min.css -Paket Esensial Modern Diperkecil ke CSS
• scss/notosans-fontface-modern.scss -Paket Esensial Modern di SCSS
• less/notosans-fontface-modern.less -paket esensial modern dalam lebih sedikit

Paket All-Weight

Paket "semua berat" berisi semua font Noto Sans normal.

Paket ini berisi font berikut:

• Notosans tipis
• Notosans Thinitalic
• Notosans Extralight
• Notosans ekstralightitalic
• Notosans Light
• Notosans ringan
• Notosans biasa
• Notosans Italic
• Notosans Medium
• Notosans Mediumitaltic
• Notosans Semibold
• Notosans semibolditalic
• Notosans berani
• Notosans Bolditalic
• Notosans Extrabold
• Notosans Extrabolditalic
• Notosans hitam
• Notosans Blackitalic

File yang tersedia adalah:

• css/notosans-fontface-allweight.css -Paket All-Weight Disusun ke CSS

• css/notosans-fontface-allweight.min.css -Paket All-Weight Dikini Di Minified ke CSS

• scss/notosans-fontface-allweight.scss -Paket All-Weight di SCSS

• less/notosans-fontface-allweight.less -paket all-weight lebih rendah

• Ada juga variasi modern yang hanya merujuk file font woff2 :

• css/notosans-fontface-modern-allweight.css -Paket All-Weight Modern yang Disusun ke CSS

• css/notosans-fontface-modern-allweight.min.css -Paket all-weight modern yang diminifikasi untuk CSS

• scss/notosans-fontface-modern-allweight.scss -Paket All-Weight Modern di SCSS

• less/notosans-fontface-modern-allweight.less -Paket all-weight modern dalam lebih sedikit

Kebiasaan

Dimungkinkan untuk membuat set font noto sans dan font Anda sendiri juga dengan menggunakan lebih sedikit, SCSS atau stylus mixins yang disediakan dalam proyek ini,

Saat Anda menggunakan fontface atau notosans-fontface mixin, Anda perlu menyediakan semua .eot , .woff2 , .woff , .ttf dan .svg file di direktori yang dikonfigurasi. Jika Anda menggunakan variasi modern fontface-modern atau notosans-fontface-modern mixin, Anda hanya perlu menyediakan file .woff2 di direktori yang dikonfigurasi.

Tentang mixin notosans-fontface atau notosans-fontface-modern , Anda dapat mendefinisikan kembali variabel notosans-fontface-path .

Lebih sedikit mixins

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

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

Mixin styles

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