postcss fontpie 다운로드 - postcss fontpie 소스 코드 다운로드

postcss fontpie

글꼴 다운로드

v2.0.1

다운로드

Postcs-Fontpie

fontpie 사용하여 글꼴 로딩 레이아웃 이동을 최적화하기위한 PostCSS 플러그인!

특징

자동화 : 사용자 정의 웹 글꼴과 일치하는 폴백 글꼴 메트릭을 생성합니다!
유연성 : 글꼴 유형 (Sans Serif, Serif 및 Monospace), 무게 및 스타일을 처리합니다.
강력한 : 훌륭한 fontpie 이로 구동됩니다

설치하다

$ npm i postcss-fontpie

용법

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