fontaine 다운로드 - fontaine 소스 코드 다운로드

fontaine

글꼴 다운로드

v0.5.0

다운로드

폰테인

글꼴 메트릭을 기반으로 자동 글꼴 폴백

changelog
▶ ️ 온라인 놀이터

특징

? 제작 된 글꼴 메트릭으로 로컬 글꼴 폴백을 사용하여 CLS를 줄입니다.
글꼴 메트릭을 생성하고 자동으로 재정의합니다.
⚡️ 순수한 CSS, 제로 런타임 오버 헤드.

Playground 프로젝트에서 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 접미사를 추가해야합니다. 이것은 어떻게 생겼습니까? 우리는 --ifm-font-family-base 변수에서 참조 된 사용자 정의 글꼴 팝핀을 사용하고 있다고 상상해보십시오. 우리는 다음과 같은 조정을 할 것입니다.

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

무대 뒤에서 Fontaine이 만든 'Poppins Override' @font-face 규칙이 있습니다. 이 재정의 글꼴 패밀리를 CSS 변수에 수동으로 추가함으로써 우리는 사이트가 Fontaine이 생성하는 올바른 글꼴 메트릭과 함께 Fallback @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 Font-Family에 재정의를 추가합니다.

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

개발

이 저장소를 복제하십시오
Corepack Enable을 사용하여 corepack enable (NODE.JS 용 npm i -g corepack 사용 <16.10)
pnpm install 사용하여 종속성을 설치하십시오
pnpm dev 사용하여 대화식 테스트를 실행합니다. pnpm demo:dev