notosans fontface

Noto sem fontes

Um pacote simples, fornecendo a face do Noto Sans.

As fontes estão disponíveis nos formatos .eot , .woff2 , .woff , .ttf e .svg para estar em conformidade com todos os navegadores (do IE6/muito velho a navegadores modernos).

Pré -requisitos

• Nodejs,
• NPM ou fio ou carruagem.

Instalação

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

# Install via yarn
yarn add notosans-fontface

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

Uso

Para cada fonte que você deseja usar, você precisa copiar as fontes do diretório fonts deste projeto.

Por exemplo, para a fonte NotoSans Regular , os arquivos necessários são:

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

Pacotes modernos referenciam apenas arquivos de fonte woff2 .

Pacotes

Os pacotes são css prontos para uso, less , scss e arquivos styl .

Para cada pacote, você precisa fornecer arquivos .woff2 .eot .woff , .ttf e .svg no diretório configurado.

Se você estiver usando o arquivo de pacote Less ou SCSS, poderá substituir a variável notosans-fontface-path antes da importação de Notosans--Face. Essa variável configura o diretório em que as fontes são armazenadas, o valor padrão é ../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 ;
}

Pacote essencial

O pacote "essencial" contém as fontes mínimas no Noto para renderizar sua página.

Este pacote contém as seguintes fontes:

• Notosanos regulares
• Notosanos em itálico
• Notosanos ousados
• Notosanos Bolditalic

Os arquivos disponíveis são:

• css/notosans-fontface.css - pacote essencial compilado ao CSS
• css/notosans-fontface.min.css - pacote essencial minificado para CSS
• scss/notosans-fontface.scss - Pacote essencial no SCSS
• less/notosans-fontface.less - pacote essencial em menos

Há também a variação moderna que faz referência a apenas arquivos de fontes woff2 :

• css/notosans-fontface-modern.css -Modern essencial Package Compiled to CSS
• css/notosans-fontface-modern.min.css -Modern essencial Package Minified to CSS
• scss/notosans-fontface-modern.scss -Modern essencial Package no SCSS
• less/notosans-fontface-modern.less -pacote essencial moderno em menos

Pacote para todo o peso

O pacote "All Weight" contém todas as fontes normais no Noto.

Este pacote contém as seguintes fontes:

• Notosanos finos
• Notosanos Thinitalic
• Notosanos extralight
• Notosanos extralightitalic
• Notosanos leves
• Notosanos Lightitalic
• Notosanos regulares
• Notosanos em itálico
• Notosanos médios
• Notosanos médios
• Notosans semibold
• Notosanos semibolditalic
• Notosanos ousados
• Notosanos Bolditalic
• Notosanos extrabold
• Notosanos extrabolditalic
• Notosanos negros
• Notosanos Blackitalic

Os arquivos disponíveis são:

• css/notosans-fontface-allweight.css -Pacote de peso todo compilado ao CSS

• css/notosans-fontface-allweight.min.css -pacote para todo o peso minificado para CSS

• scss/notosans-fontface-allweight.scss -Pacote de peso todo no SCSS

• less/notosans-fontface-allweight.less -pacote de peso total em menos

• Há também a variação moderna que faz referência a apenas arquivos de fontes woff2 :

• css/notosans-fontface-modern-allweight.css -Modern Package para todo o peso compilado para CSS

• css/notosans-fontface-modern-allweight.min.css -Modern Package para CSS

• scss/notosans-fontface-modern-allweight.scss -Modern Package para todo o SCSS

• less/notosans-fontface-modern-allweight.less -pacote moderno para todos os

Personalizado

É possível fazer seu próprio conjunto de fontes Noto Sans e suas próprias fontes também usando menos, SCSS ou Mixins de caneta fornecidos neste projeto,

Quando você usa o fontface ou notosans-fontface Mixins, você precisa fornecer todos os arquivos .eot , .woff2 , .woff , .ttf e .svg no diretório configurado. Se você usar o Modern Variation fontface-modern ou notosans-fontface-modern Mixins, você só precisará fornecer arquivos .woff2 no ​​diretório configurado.

Sobre as mixins notosans-fontface ou notosans-fontface-modern , você pode redefinir a variável notosans-fontface-path .

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

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