notosans fontface

NOTO SANS FONT FACE

Un package simple fournissant le visage Noto sans police.

Les polices sont disponibles dans les formats .eot , .woff2 , .woff , .ttf et .svg afin d'être conforme à tous les navigateurs (de IE6 / très vieux aux navigateurs modernes).

Condition préalable

• Nodejs,
• NPM ou fil ou 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

Usage

Pour chaque police que vous souhaitez utiliser, vous devez copier les polices du répertoire fonts de ce projet.

Par exemple, pour la police NotoSans Regular , les fichiers requis sont:

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

Les packages modernes ne font référence que des fichiers de police woff2 .

Packages

Les packages sont des fichiers css , less , scss et styl prêts à l'emploi.

Pour chaque package, vous devez fournir tous les fichiers de police .eot , .woff2 , .woff , .ttf et .svg dans le répertoire configuré.

Si vous utilisez le fichier de package moins ou SCSS, vous pouvez remplacer la variable notosans-fontface-path avant l'importation de Notosans-Fontface. Cette variable configure le répertoire où les polices sont stockées, la valeur par défaut est ../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 ;
}

Ensemble essentiel

Le package "Essential" contient les polices Noto sans minimum pour rendre votre page.

Ce package contient les polices suivantes:

• Notosans régulier
• Notosans italique
• Notosans audacieux
• Notosans bolditaires

Les fichiers disponibles sont:

• css/notosans-fontface.css - Package essentiel compilé sur CSS
• css/notosans-fontface.min.css - Package essentiel a minimisé à CSS
• scss/notosans-fontface.scss - Package essentiel dans SCSS
• less/notosans-fontface.less - package essentiel en moins

Il existe également la variation moderne qui ne fait référence que les fichiers de police woff2 :

• css/notosans-fontface-modern.css - Package essentiel moderne compilé sur CSS
• css/notosans-fontface-modern.min.css - Package essentiel moderne a minimisé
• scss/notosans-fontface-modern.scss - Package essentiel moderne dans SCSS
• less/notosans-fontface-modern.less - package essentiel moderne en moins

Package tout-poids

Le package "All Weight" contient toutes les polices NOTO SANS normales.

Ce package contient les polices suivantes:

• Notosans mince
• Notosans minces
• Notosans extralight
• Notosans extralighatif
• Notosans Light
• Notosans léger
• Notosans régulier
• Notosans italique
• Notosans Medium
• Notosans moyentistiques
• Notosans semi-semi
• Notosans semi-soldats
• Notosans audacieux
• Notosans bolditaires
• Les notosans sont tombés
• Notosans extraboldicalistes
• Notosans noir
• Notosans noirs

Les fichiers disponibles sont:

• css/notosans-fontface-allweight.css - Package tout-poids compilé sur CSS

• css/notosans-fontface-allweight.min.css - Package tout-poids a minimisé à CSS

• scss/notosans-fontface-allweight.scss - Package tout-poids dans SCSS

• less/notosans-fontface-allweight.less - package tout-poids en moins

• Il existe également la variation moderne qui ne fait référence que les fichiers de police woff2 :

• css/notosans-fontface-modern-allweight.css - Package moderne entièrement compilé avec CSS

• css/notosans-fontface-modern-allweight.min.css - Ensemble de poids moderne a minimisé le CSS

• scss/notosans-fontface-modern-allweight.scss - Package moderne tout-poids dans SCSS

• less/notosans-fontface-modern-allweight.less - package moderne tout-poids en moins

Coutume

Il est possible de créer votre propre ensemble de polices Noto sans et vos propres polices en utilisant moins, SCSS ou Mixins Stylus fournis dans ce projet,

Lorsque vous utilisez les mélanges fontface ou notosans-fontface , vous devez fournir tous les fichiers .eot , .woff2 , .woff , .ttf et .svg dans le répertoire configuré. Si vous utilisez les mélanges modernes de variation fontface-modern ou notosans-fontface-modern , vous n'avez qu'à fournir des fichiers .woff2 dans le répertoire configuré.

À propos des mélanges notosans-fontface ou notosans-fontface-modern , vous pouvez redéfinir la variable notosans-fontface-path .

Moins de 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 ;
}

Mixins SCSS

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

Mixins Stylys

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