notosans fontface

Noto ohne Schriftart Gesicht

Ein einfaches Paket, das das Noto ohne Schriftart bietet.

Die Schriftarten sind in den Formaten .eot , .woff2 , .woff , .ttf und .svg erhältlich, um mit allen Browsern zu konform (von IE6/sehr alten IOs bis hin zu modernen Browsern).

Voraussetzungen

• Nodejs,
• NPM oder Garn oder Bower.

Installation

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

# Install via yarn
yarn add notosans-fontface

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

Verwendung

Für jede Schriftart, die Sie verwenden möchten, müssen Sie die Schriftarten aus dem fonts dieses Projekts kopieren.

In der NotoSans Regular sind die erforderlichen Dateien mitspielsweise:

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

Moderne Pakete Referenzen nur woff2 -Schriftart Dateien.

Pakete

Die Pakete sind bereit, css , less , scss und styl Dateien zu verwenden.

Für jedes Paket müssen Sie im konfigurierten Verzeichnis alle .eot , .woff2 , .woff , .ttf und .svg -Schriftartdateien bereitstellen.

Wenn Sie die Lenar- oder SCSS-Paketdatei verwenden, können Sie die Variable notosans-fontface-path vor dem Import von Notosans-FONT-Face überschreiben. Diese Variable konfiguriert das Verzeichnis, in dem die Schriftarten gespeichert werden, der Standardwert ist ../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 ;
}

Essentielles Paket

Das "Essential" -Paket enthält die minimalen Noto -Sans -Schriftarten, um Ihre Seite zu rendern.

Dieses Paket enthält die folgenden Schriftarten:

• Notosans regulär
• Notosans kursiv
• Notosans mutig
• Notosans Bolditalic

Die verfügbaren Dateien sind:

• css/notosans-fontface.css - Essential Paket, das mit CSS zusammengestellt wurde
• css/notosans-fontface.min.css - Essentielles Paket, das mit CSS abgebaut ist
• scss/notosans-fontface.scss
• less/notosans-fontface.less - Essential Paket in weniger

Es gibt auch die moderne Variation, die nur auf woff2 -Schriftdateien verweist:

• css/notosans-fontface-modern.css -Modernes Essential Paket für CSS zusammengestellt
• css/notosans-fontface-modern.min.css -Modernes Essential Paket, das mit CSS abgerufen wurde
• scss/notosans-fontface-modern.scss
• less/notosans-fontface-modern.less -Modernes Essential Paket in weniger

All-Gewichtspaket

Das "All -Gewicht" -Paket enthält alle normalen Noto -Sans -Schriftarten.

Dieses Paket enthält die folgenden Schriftarten:

• Notosans dünn
• Notosans dünn
• Notosans Extralight
• Notosans Extralightitalic
• Notosans Licht
• Notosans leuchtend
• Notosans regulär
• Notosans kursiv
• Notosans Medium
• NOTOSANS MEDITITAL
• Notosans Halbold
• Notosans Semibitalic
• Notosans mutig
• Notosans Bolditalic
• Notosans Extrabold
• Notosans Extraboldital
• Notosans schwarz
• Notosans Blackital

Die verfügbaren Dateien sind:

• css/notosans-fontface-allweight.css -All-Gewicht-Paket für CSS zusammengestellt

• css/notosans-fontface-allweight.min.css -All-Gewicht-Paket, das an CSS abgerufen wurde

• scss/notosans-fontface-allweight.scss

• less/notosans-fontface-allweight.less -All-Gewicht-Paket in weniger

• Es gibt auch die moderne Variation, die nur auf woff2 -Schriftdateien verweist:

• css/notosans-fontface-modern-allweight.css -Modernes All-Gewicht-Paket für CSS zusammengestellt

• css/notosans-fontface-modern-allweight.min.css -Modernes All-Gewicht-Paket, das an CSS abgerufen wurde

• scss/notosans-fontface-modern-allweight.scss

• less/notosans-fontface-modern-allweight.less -Modernes All-Gewicht-Paket in weniger

Brauch

Es ist möglich, auch Ihre eigenen Schriftarten und Ihre eigenen Schriftarten zu erstellen, indem Sie weniger, SCSS oder Stylus -Mixins in diesem Projekt verwenden.

Wenn Sie die fontface oder notosans-fontface Mixins verwenden, müssen Sie im konfigurierten Verzeichnis alle Dateien für .eot , .woff2 , .woff , .ttf und .svg Dateien bereitstellen. Wenn Sie die Modern Variation fontface-modern oder notosans-fontface-modern Mixins verwenden, müssen Sie nur .woff2 Dateien im konfigurierten Verzeichnis bereitstellen.

Über die notosans-fontface oder notosans-fontface-modern Mixins können Sie die notosans-fontface-path Pfadvariable neu definieren.

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

Stallys Mixins

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