fontaine

fontaine

Fallback de police automatique basé sur les mesures de police

• Changelog
• ▶ ️ Aire de jeux en ligne

Caractéristiques

• ? Réduit les CL en utilisant des calculs de police locaux avec des mesures de police fabriquées.
• Génère automatiquement des métriques de police et remplacez automatiquement.
• ⚡️ CSS pur, au-dessus zéro des frais généraux.

Sur le projet Playground, l'activation / désactivation fontaine fait la différence suivante / , sans personnalisation requise:

	Avant	Après
CLS	0.24	0.054
Performance	92	100

Installation

Avec pnpm

pnpm add -D fontaine

Ou, avec npm

npm install -D fontaine

Ou, avec yarn

yarn add -D fontaine

Usage

 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
      } ) ,
    ] ,
  } ,
} )

Remarque Si vous utilisez Nuxt, consultez Nuxt-Font-Metrics qui utilise fontaine sous le capot.

Si votre police personnalisée est utilisée par le mécanisme des variables CSS, vous devrez apporter un ajustement à vos variables CSS pour donner un coup de main à Fontaine. Docusaurus en est un exemple, il utilise la variable --ifm-font-family-base pour référencer une police personnalisée. Afin que Fontaine puisse connecter la variable à la police, nous devons ajouter un suffixe {Name of Font} override à cette variable. À quoi cela ressemble-t-il? Imaginez que nous utilisons les Poppins de police personnalisés qui sont référencés à partir de la variable --ifm-font-family-base , nous effectuons l'ajustement suivant:

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

Dans les coulisses, il y a une règle «Poppins Override» @font-face qui a été créée par Fontaine. En ajoutant manuellement cette famille de polices de remplacement à notre variable CSS, nous faisons en sorte que notre site utilise la règle Fallback @font-face avec les mesures de police correctes générées par Fontaine.

Comment ça marche

fontaine analysera vos règles de @font-face et générera des règles de repli avec les mesures correctes. Par exemple:

 @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 % ;
}

Ensuite, chaque fois que vous utilisez font-family: 'Roboto' , fontaine ajoutera la priorité à la Font-Family:

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

Développement

• Cloner ce référentiel
• Activer CorePack à l'aide corepack enable (Utilisez npm i -g corepack pour Node.js <16.10)
• Installez les dépendances à l'aide de pnpm install
• Exécutez des tests interactifs à l'aide de pnpm dev ; Lancez un serveur Vite à l'aide du code source avec pnpm demo:dev

Crédits

Cela n'aurait pas été possible sans:

• Outillage incroyable et mesures générées à partir de CapSizecSS
• Suggestion et algorithme de Katie Hempenius & Kara Erickson dans l'équipe Google Aurora - Voir les notes sur le calcul des remplacements métriques de police
• Suggestion de nom de package à partir de @clemcode

Licence

Fait avec ❤️

Publié sous la licence MIT.