postcss fontpie Téléchargement - postcss fontpie Code source Télécharger

postcss fontpie

Téléchargement de polices

v2.0.1

Télécharger

postcss-fontpie

Un plugin PostCSS pour optimiser les déplacements de mise en page du chargement des polices à l'aide fontpie !

Caractéristiques

Automated: génère des mesures de police de secours pour correspondre à toute police Web personnalisée!
Flexible: gère le type de police (Sans Serif, Serif et Monospace), le poids et le style
Robuste: alimenté par la superbe fontpie

Installer

$ npm i postcss-fontpie

Usage

entrée.css

 @font-face {
  font-family : 'Noto Serif' ;
  font-weight : 400 ;
  font-style : italic;
  font-display : swap;
  src : url (NotoSerif-Italic.ttf) format ( 'ttf' );
}

@font-face {
  font-family : 'Roboto' ;
  font-weight : 400 ;
  font-style : normal;
  font-display : swap;
  src : url (Roboto-Regular.ttf) format ( 'ttf' );
}

@font-face {
  font-family : 'Ubuntu Mono' ;
  font-weight : 700 ;
  font-style : normal;
  font-display : swap;
  src : url (UbuntuMono-Bold.ttf) format ( 'ttf' );
}

index.js:

 import fs from 'node:fs/promises'
import { join } from 'node:path'
import postcss from 'postcss'
import postcssFontpie from 'postcss-fontpie'

const inputPath = `input.css`
const inputCss = await fs . readFile ( inputPath , `utf8` )

const outputPath = `output.css`
const outputCss = (
  await postcss ( [
    postcssFontpie ( {
      // A mapping from `font-family` to its font type (`sans-serif`, `serif`, or `mono`).
      fontTypes : {
        'Noto Serif' : `serif` ,
        Roboto : `sans-serif` ,
        'Ubuntu Mono' : `mono` ,
      } ,

      // An optional function that transforms a font face to a path to the font
      // file.
      resolveFilename : fontFace => join ( `./path/to/fonts` , fontFace . src ) ,
    } ) ,
  ] ) . process ( css , { from : inputPath , to : outputPath } )
) . css
await fs . writeFile ( outputPath , outputCss )

output.css :

 @font-face {
  font-family : 'Noto Serif Fallback' ;
  font-style : italic;
  font-weight : 400 ;
  src : local (Times New Roman Italic);
  ascent-override : 91.94 % ;
  descent-override : 25.2 % ;
  line-gap-override : 0 % ;
  size-adjust : 116.25 % ;
}

@font-face {
  font-family : 'Noto Serif' ;
  font-weight : 400 ;
  font-style : italic;
  font-display : swap;
  src : url (NotoSerif-Italic.ttf) format ( 'ttf' );
}

@font-face {
  font-family : 'Roboto Fallback' ;
  font-style : normal;
  font-weight : 400 ;
  src : local (Arial);
  ascent-override : 92.49 % ;
  descent-override : 24.34 % ;
  line-gap-override : 0 % ;
  size-adjust : 100.3 % ;
}

@font-face {
  font-family : 'Roboto' ;
  font-weight : 400 ;
  font-style : normal;
  font-display : swap;
  src : url (Roboto-Regular.ttf) format ( 'ttf' );
}

@font-face {
  font-family : 'Ubuntu Mono Fallback' ;
  font-style : normal;
  font-weight : 700 ;
  src : local (Courier New Bold);
  ascent-override : 99.62 % ;
  descent-override : 20.4 % ;
  line-gap-override : 0 % ;
  size-adjust : 83.32 % ;
}

@font-face {
  font-family : 'Ubuntu Mono' ;
  font-weight : 700 ;
  font-style : normal;
  font-display : swap;
  src : url (UbuntuMono-Bold.ttf) format ( 'ttf' );
}

Le plugin peut également être utilisé dans postcss.config.js . Voir fontpie pour la prise en charge du format de police et la compatibilité du navigateur.