postcss fontpieダウンロード-Postcss postcss fontpieソースコードのダウンロード

postcss fontpie

フォントのダウンロード

v2.0.1

ダウンロード

postcss-fontpie

fontpieを使用してフォントロードレイアウトシフトを最適化するためのPostCSSプラグイン！

特徴

自動化：カスタムWebフォントに一致するフォールバックフォントメトリックを生成します！
フレキシブル：フォントタイプ（Sans Serif、Serif、Monospace）、Weight、およびStyleを処理する
ロバスト：素晴らしいfontpieを搭載

インストール

$ npm i postcss-fontpie

使用法

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