fontaine
v0.5.0
ทางเลือกฟอนต์อัตโนมัติตามตัวอักษรฟอนต์
ในโครงการสนามเด็กเล่นการเปิดใช้งาน / ปิดการใช้งาน 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 ให้ตรวจสอบ Nuxt-Font-Metrics ซึ่งใช้
fontaineภายใต้ประทุน
หากฟอนต์ที่กำหนดเองของคุณถูกใช้ผ่านกลไกของตัวแปร CSS คุณจะต้องปรับแต่งตัวแปร CSS ของคุณเพื่อให้ Fontaine ช่วยได้ Docusaurus เป็นตัวอย่างของสิ่งนี้มันใช้ตัวแปร --ifm-font-family-base เพื่ออ้างอิงตัวอักษรที่กำหนดเอง เพื่อให้ Fontaine สามารถเชื่อมต่อตัวแปรกับตัวอักษรเราจำเป็นต้องเพิ่ม {Name of Font} override ในตัวแปรนั้น หน้าตานี้เป็นอย่างไร? ลองจินตนาการว่าเราใช้ poppins แบบอักษรที่กำหนดเองซึ่งอ้างอิงจากตัวแปร --ifm-font-family-base เราจะทำการปรับต่อไปนี้:
:root {
/* ... */
- --ifm-font-family-base: 'Poppins';
+ --ifm-font-family-base: 'Poppins', 'Poppins override'; เบื้องหลังมีกฎ 'Poppins Override' @font-face ที่ถูกสร้างขึ้นโดย Fontaine ด้วยการเพิ่มตระกูลตัวอักษรแทนที่ด้วยตนเองลงในตัวแปร CSS ของเราเราทำให้ไซต์ของเราใช้กฎทางเลือก @font-face พร้อมตัวชี้วัดแบบอักษรที่ถูกต้องที่ Fontaine สร้างขึ้น
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:
: root {
font-family : 'Roboto' ;
/* This becomes */
font-family : 'Roboto' , 'Roboto override' ;
}corepack enable (ใช้ npm i -g corepack สำหรับ node.js <16.10)pnpm installpnpm dev ; เรียกใช้เซิร์ฟเวอร์ VITE โดยใช้ซอร์สโค้ดด้วย pnpm demo:dev สิ่งนี้จะเป็นไปไม่ได้หากไม่มี:
ทำด้วย❤
เผยแพร่ภายใต้ใบอนุญาต MIT
