Unduh postcss fontpie - Unduh Kode Sumber postcss fontpie

postcss fontpie

Pengunduhan font

v2.0.1

Unduh

PostCSS-Fontpie

Plugin PostCSS untuk mengoptimalkan tata letak pemuatan font menggunakan fontpie !

Fitur

Otomatis: Menghasilkan Font Font Metrics untuk mencocokkan font web khusus!
Fleksibel: Menangani Jenis Font (Sans Serif, Serif, dan Monospace), Berat, dan Gaya
Kuat: Didukung oleh fontpie yang luar biasa

Memasang

$ npm i postcss-fontpie

Penggunaan

input.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' );
}