astro-font将自动优化您的自定义字体，本地字体，字体，以供性能优化任何CDN和Google字体。
该项目的灵感来自下一项。JS字体优化。
npm install astro-font
# # or yarn
yarn add astro-font
# # or pnpm
pnpm add astro-font自动优化任何Google字体。要在所有页面中使用字体，请将其添加到Astro布局中的<head>文件：
---
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
src: [],
name: " Poppins " ,
// Google Fonts URL
googleFontsURL: ' https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap ' ,
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
] }
/>
</ head > ---
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
// Picked up font URL by manually visiting Google Fonts URL
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
] }
/>
</ head > ---
import { join } from " node:path " ;
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' normal ' ,
weight: ' 400 ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Afacad-Regular.ttf ' )
},
{
style: ' medium ' ,
weight: ' 500 ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Afacad-Medium.ttf ' )
},
],
preload: false ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
] }
/>
</ head >您可以在应用程序中导入并使用多个字体。您可以采用两种方法。
只需将配置的数组扩展到包含字体的新集合：
---
import { join } from " node:path " ;
import { AstroFont } from " astro-font " ;
---
< head >
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
selector: " body > span " ,
fallback: " serif " ,
},
] }
/>
</ head >每个配置对象的selector属性可用于配置哪些CSS类将反映整个CSS（自动包括对后备字体CSS的引用）。
---
import { join } from " node:path "
---
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
fallback: " sans-serif " ,
// My Custom CSS Selector
// Type: ClassName
selector: " .custom_class " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
fallback: " serif " ,
// My Custom CSS Selector
// Type: CSS Selector
selector: " body > span " ,
},
] }
/>每个配置对象的cssVariable属性可用于配置CSS变量将在您的文档的:root CSS选择器中反映的css变量（自动包括对后备字体CSS的引用）。
---
import { join } from " node:path "
---
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
fallback: " sans-serif " ,
// My Custom CSS Selector
// Type: ClassName
selector: " .custom_class " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
fallback: " serif " ,
// My Custom CSS Variable
// Type: CSS Variable
cssVariable: " astro-font " ,
// and now use it as style="font-family: var(--astro-font)"
},
] }
/>每个配置对象的fallbackName属性可用于配置后备字体的姓氏（在CSS中）。
---
import { join } from " node:path "
---
< AstroFont
config = { [
{
name: " Afacad " ,
src: [
{
style: ' bold ' ,
weight: ' 700 ' ,
path: ' https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2 '
},
],
preload: true ,
display: " swap " ,
fallback: " sans-serif " ,
selector: " .custom_class " ,
// My Custom Fallback Font Name
fallbackName: " Afacad Override " ,
},
{
name: " Inter " ,
src: [
{
weight: ' 400 ' ,
style: ' normal ' ,
path: join ( process . cwd (), ' public ' , ' fonts ' , ' Inter-Regular.ttf ' )
}
],
preload: true ,
display: " swap " ,
fallback: " serif " ,
cssVariable: " astro-font " ,
// My Custom Fallback Font Name
fallbackName: " Inter Custom Override " ,
},
] }
/>astro-font使用以下节点导入：
node:pathnode:buffer 为了确保它在CloudFlare工人中工作，请根据指南启用node_compatibiliy标志https://developers.cloudflare.com/workers/runtime-apis/nodejs/nodejs/#enable-nodejs-with-with-workers。
如果以上指南无法正常工作，请转到您的CloudFlare项目>“设置”>“功能>兼容标志”并添加标志（如下）。
根据Astro + CloudFlare文档，您需要修改VITE配置以允许节点：*导入语法：
// File: astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
// https://astro.build/config
export default defineConfig({
output: 'server',
adapter: cloudflare(),
+ vite: {
+ ssr: {
+ external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map((i) => `node:${i}`),
+ },
+ // make sure to use node:fs, node:path, or node:os if you are using it in your project instead of fs, path or os
+ },
});由于在Cloublflare页面（服务器端渲染）上下文中无法访问public目录中的文件，因此您需要在CDN上使用字体。为了使开发人员体验无痛，请在Astro中使用CloudFlare设置本地字体时使用以下代码段：
---
import { join } from " node:path " ;
import { AstroFont } from " astro-font " ;
const fontPrefix = import . meta . env . PROD
? Astro . site . toString ()
: join ( process . cwd (), " public " );
---
< AstroFont
config = { [
{
name: " Editorial New " ,
src: [
{
style: " italic " ,
weight: " 500 " ,
path: join (
fontPrefix ,
" fonts " ,
" PPEditorialNew-MediumItalic.woff2 "
),
},
],
preload: true ,
display: " swap " ,
selector: " body " ,
fallback: " sans-serif " ,
}
] }
/>我们爱我们的贡献者！您可以做出贡献：
