fontaine

方丹

基于字体指标的自动字体后备

• ChangElog
• ▶q在线操场

特征

• ？通过使用具有精心设计的字体指标的本地字体后备来减少CLS。
• 生成字体指标并自动覆盖。
• ⚡️纯CSS，零运行时开销。

在操场项目中，启用 /禁用fontaine使以下差异/无需自定义：

	前	后
CLS	0.24	0.054
表现	92	100

安装

使用pnpm

pnpm add -D fontaine

或者，使用npm

npm install -D fontaine

或者， yarn

yarn add -D fontaine

用法

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

请注意，如果您使用的是NUXT，请查看使用引擎盖下的fontaine的Nuxt-Font-Metrics。

如果通过CSS变量的机制使用您的自定义字体，则需要对CSS变量进行调整，以使Fontaine提供帮助。 Docusaurus就是一个例子，它使用--ifm-font-family-base变量来引用自定义字体。为了使Fontaine可以将变量与字体连接起来，我们需要在该变量中添加一个{Name of Font} override后缀。这是什么样的？好吧，想象一下我们正在使用自定义字体Poppins，该poppins从--ifm-font-family-base变量中引用，我们将进行以下调整：

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

在幕后，Fontaine创建了一个“ poppins覆盖” @font-face规则。通过手动将此覆盖字体系列添加到我们的CSS变量中，我们使我们的网站使用Fontaine生成的正确字体指标的后备@font-face规则。

它如何工作

fontaine将扫描您的@font-face规则，并使用正确的指标生成后备规则。例如：

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

然后，每当您使用font-family: 'Roboto'时， fontaine都会将覆盖物添加到字体家庭中：

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

发展

• 克隆这个存储库
• 使用corepack enable CorePack（使用npm i -g corepack for Node.js <16.10）
• 使用pnpm install
• 使用pnpm dev运行交互式测试；使用pnpm demo:dev

学分

没有：这是不可能的：

• Capsizecss的惊人工具和生成的指标
• Google Aurora团队的Katie Hempenius和Kara Erickson的建议和算法
• @ClemCode的软件包名称建议

执照

用❤️制成

根据MIT许可发布。