fontaine

Fontaine

Fallback Font Otomatis Berdasarkan Metrik Font

• Changelog
• ▶ ️ Taman bermain online

Fitur

• ? Mengurangi CLS dengan menggunakan fallback font lokal dengan metrik font yang dibuat.
• Menghasilkan metrik font dan override secara otomatis.
• ⚡️ CSS murni, nol runtime overhead.

Pada proyek taman bermain, mengaktifkan / menonaktifkan fontaine membuat perbedaan rendering berikut / , tanpa kustomisasi diperlukan:

	Sebelum	Setelah
Cls	0.24	0.054
Pertunjukan	92	100

Instalasi

Dengan pnpm

pnpm add -D fontaine

Atau, dengan npm

npm install -D fontaine

Atau, dengan yarn

yarn add -D fontaine

Penggunaan

 import { FontaineTransform } from 'fontaine'

// Astro config - astro.config.mjs
import { defineConfig } from 'astro/config'

const options = {
  fallbacks : [ 'BlinkMacSystemFont' , 'Segoe UI' , 'Helvetica Neue' , 'Arial' , 'Noto Sans' ] ,
  // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
  resolvePath : id => `file:///path/to/public/dir ${ id } ` ,
  // overrideName: (originalName) => `${name} override`
  // sourcemap: false
  // skipFontFaceGeneration: (fallbackName) => fallbackName === 'Roboto override'
}

// Vite
export default {
  plugins : [ FontaineTransform . vite ( options ) ]
}

// Next.js
export default {
  webpack ( config ) {
    config . plugins = config . plugins || [ ]
    config . plugins . push ( FontaineTransform . webpack ( options ) )
    return config
  } ,
}

// Docusaurus plugin - to be provided to the plugins option of docusaurus.config.js
// n.b. you'll likely need to require fontaine rather than importing it
const fontaine = require ( 'fontaine' )

function fontainePlugin ( _context , _options ) {
  return {
    name : 'fontaine-plugin' ,
    configureWebpack ( _config , _isServer ) {
      return {
        plugins : [
          fontaine . FontaineTransform . webpack ( options ) ,
        ] ,
      }
    } ,
  }
}

// Gatsby config - gatsby-node.js
const { FontaineTransform } = require ( 'fontaine' )

exports . onCreateWebpackConfig = ( { stage , actions , getConfig } ) => {
  const config = getConfig ( )
  config . plugins . push ( FontaineTransform . webpack ( options ) )
  actions . replaceWebpackConfig ( config )
}

export default defineConfig ( {
  integrations : [ ] ,
  vite : {
    plugins : [
      FontaineTransform . vite ( {
        fallbacks : [ 'Arial' ] ,
        resolvePath : id => new URL ( `./public ${ id } ` , import . meta . url ) , // id is the font src value in the CSS
      } ) ,
    ] ,
  } ,
} )

CATATAN Jika Anda menggunakan Nuxt, lihat Nuxt-Font-Metrics yang menggunakan fontaine di bawah kap.

Jika font khusus Anda digunakan melalui mekanisme variabel CSS, Anda harus melakukan tweak ke variabel CSS Anda untuk memberikan bantuan kepada Fontaine. Docusaurus adalah contoh dari ini, ia menggunakan variabel --ifm-font-family-base untuk merujuk font khusus. Agar fontaine dapat menghubungkan variabel dengan font, kita perlu menambahkan {Name of Font} override akhiran ke variabel itu. Seperti apa ini? Bayangkan kami menggunakan poppins font khusus yang dirujuk dari variabel --ifm-font-family-base , kami akan membuat penyesuaian berikut:

:root {
  /* ... */
-  --ifm-font-family-base: 'Poppins';
+  --ifm-font-family-base: 'Poppins', 'Poppins override';

Di belakang layar, ada aturan 'Poppins Override' @font-face yang telah dibuat oleh Fontaine. Dengan menambahkan secara manual keluarga font override ini ke variabel CSS kami, kami membuat situs kami menggunakan aturan fontback @font-face dengan metrik font yang benar yang dihasilkan fontaine.

Cara kerjanya

fontaine akan memindai aturan @font-face Anda dan menghasilkan aturan fallback dengan metrik yang benar. Misalnya:

 @font-face {
  font-family : 'Roboto' ;
  font-display : swap;
  src : url ( '/fonts/Roboto.woff2' ) format ( 'woff2' ) , url ( '/fonts/Roboto.woff' )
      format ( 'woff' );
  font-weight : 700 ;
}
/* This additional font-face declaration will be added to your CSS. */
@font-face {
  font-family : 'Roboto override' ;
  src : local ( 'BlinkMacSystemFont' ) , local ( 'Segoe UI' ) , local ( 'Helvetica Neue' ) ,
      local ( 'Arial' ) , local ( 'Noto Sans' );
  ascent-override : 92.7734375 % ;
  descent-override : 24.4140625 % ;
  line-gap-override : 0 % ;
}

Lalu, setiap kali Anda menggunakan font-family: 'Roboto' , fontaine akan menambahkan override ke keluarga font:

 : root {
  font-family : 'Roboto' ;
  /* This becomes */
  font-family : 'Roboto' , 'Roboto override' ;
}

Perkembangan

• Kloning repositori ini
• Aktifkan CorePack Menggunakan corepack enable (Gunakan npm i -g corepack untuk Node.js <16.10)
• Instal dependensi menggunakan pnpm install
• Jalankan tes interaktif menggunakan pnpm dev ; Luncurkan server vite menggunakan kode sumber dengan pnpm demo:dev

Kredit

Ini tidak akan mungkin tanpa:

• Tooling yang luar biasa dan metrik yang dihasilkan dari capsizecss
• Saran dan Algoritma dari Katie Hempenius & Kara Erickson di tim Google Aurora - lihat catatan tentang menghitung override metrik font
• Saran nama paket dari @clemcode

Lisensi

Dibuat dengan ❤️

Diterbitkan di bawah lisensi MIT.