Inicio>Recursos para la creación de sitios web>Descarga de fuentes
Descargar

Noto sin cara de fuente

Un paquete simple que proporciona la cara de fuentes notas.

Las fuentes están disponibles en formatos .eot , .woff2 , .woff , .ttf y .svg para cumplir con todos los navegadores (desde IE6/muy antiguos hasta navegadores modernos).

Requisitos previos

  • Nodejs,
  • Npm o hilo o balanza.

Instalación 

 # 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 fuente que desea usar, debe copiar las fuentes del directorio de fonts de este proyecto.

Por ejemplo, para la fuente NotoSans Regular , los archivos requeridos son:

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

Paquetes modernos Referencias solo archivos de fuentes woff2 .

Paquetes

Los paquetes son css listos para usar, less , scss y archivos styl .

Para cada paquete, debe proporcionar todos los archivos .eot , .woff2 , .woff , .ttf y .svg font en el directorio configurado.

Si está utilizando el archivo del paquete LESS o SCSS, puede anular la variable notosans-fontface-path antes de la importación de Notosans-Fontface. Esta variable configura el directorio donde se almacenan las fuentes, el valor predeterminado es ../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 ;
}

Paquete esencial

El paquete "esencial" contiene la mínima nota sin fuentes para representar su página.

Este paquete contiene las siguientes fuentes:

  • Notosanos regulares
  • Nótosanos en cursiva
  • Nótosanos en negrita
  • Nótosanos Bolditalices

Los archivos disponibles son:

  • css/notosans-fontface.css : paquete esencial compilado a CSS
  • css/notosans-fontface.min.css : paquete esencial minificado a CSS
  • scss/notosans-fontface.scss - Paquete esencial en SCSS
  • less/notosans-fontface.less - paquete esencial en menos

También están la variación moderna que hace referencia a los archivos de fuentes woff2 :

  • css/notosans-fontface-modern.css -Paquete esencial moderno compilado a CSS
  • css/notosans-fontface-modern.min.css -Paquete esencial moderno minificado a CSS
  • scss/notosans-fontface-modern.scss -Paquete esencial moderno en SCSS
  • less/notosans-fontface-modern.less -paquete esencial moderno en menos

Paquete de todo peso

El paquete "All Weight" contiene todas las fuentes de notas normales.

Este paquete contiene las siguientes fuentes:

  • Nótosanos delgados
  • Nótosanos delgital
  • Nótosanos Extralight
  • Nótosanos Extralightitalic
  • Nótosanos Luz
  • Nótosanos Lightitalic
  • Notosanos regulares
  • Nótosanos en cursiva
  • Nótosanos Medio
  • Nótosanos medianos
  • Nótosanos Semibold
  • Nótosanos semibolditalices
  • Nótosanos en negrita
  • Nótosanos Bolditalices
  • Nótosanos extrabold
  • Nótosanos extrabolditalic
  • Nótosanos negros
  • Nótosanos Blackitalic

Los archivos disponibles son:

  • css/notosans-fontface-allweight.css -Paquete de todo peso compilado a CSS

  • css/notosans-fontface-allweight.min.css -Paquete de todo peso minificado a CSS

  • scss/notosans-fontface-allweight.scss -Paquete de todo peso en SCSS

  • less/notosans-fontface-allweight.less -Paquete All-Weight en menos

  • También están la variación moderna que hace referencia a los archivos de fuentes woff2 :

  • css/notosans-fontface-modern-allweight.css -Paquete moderno de todo peso compilado a CSS

  • css/notosans-fontface-modern-allweight.min.css -Paquete moderno de todo el peso minificado a CSS

  • scss/notosans-fontface-modern-allweight.scss -Paquete moderno de todo peso en SCSS

  • less/notosans-fontface-modern-allweight.less -Paquete moderno de todo el peso en menos

Costumbre

Es posible hacer su propio conjunto de fuentes de notas y sus propias fuentes también mediante el uso de menos, SCSS o Stylus Mixins proporcionados en este proyecto,

Cuando usa las mezclas fontface o notosans-fontface , debe proporcionar todos los archivos .eot , .woff2 , .woff , .ttf y .svg en el directorio configurado. Si usa la variación moderna fontface-modern o notosans-fontface-modern de nótosanos, solo necesita proporcionar archivos .woff2 en el directorio configurado.

Sobre la notosans-fontface o las mezclas notosans-fontface-modern , puede redefinir la variable notosans-fontface-path .

Menos mezclas 

 // 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
}
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo