如何在vanilla-extract/css中引入自定义字体Jungle Fever Nf？

首先，确保你的Jungle Fever Nf字体文件（比如.woff2、.ttf格式）已放置到项目的静态资源目录，比如public/fonts或src/assets/fonts（具体路径根据项目构建配置调整）。

接下来通过fontFace的src属性指定本地文件路径，同时补充字体格式声明，示例代码如下：

import { fontFace, style } from '@vanilla-extract/css';

// 定义字体规则
const jungleFeverNf = fontFace({
  // 优先尝试本地已安装字体，未找到则加载本地文件
  src: [
    'local("Jungle Fever Nf")',
    'url("/fonts/JungleFeverNf.woff2") format("woff2")',
    'url("/fonts/JungleFeverNf.ttf") format("truetype")'
  ],
  // 可选：补充字体权重、样式等属性
  fontWeight: 'normal',
  fontStyle: 'normal'
});

// 应用字体的样式
export const styledText = style({
  fontFamily: jungleFeverNf,
  fontSize: '2rem'
});

关键注意事项： #

• 路径准确性：若字体放在public目录下，路径直接从根目录起始（如/fonts/xxx）；若放在src目录，可通过导入文件获取正确路径（适配构建工具的资源处理）：

  import jungleFeverWoff2 from './assets/fonts/JungleFeverNf.woff2';
  import jungleFeverTtf from './assets/fonts/JungleFeverNf.ttf';
  
  const jungleFeverNf = fontFace({
    src: [
      'local("Jungle Fever Nf")',
      `url(${jungleFeverWoff2}) format("woff2")`,
      `url(${jungleFeverTtf}) format("truetype")`
    ]
  });
  

• 字体名称匹配：local()中的名称必须与字体文件的官方名称完全一致，可通过系统字体管理工具查看准确名称，避免拼写错误。
• 格式声明：不同字体格式对应不同format值，woff2是现代浏览器优先推荐的格式，兼具兼容性与体积优势。

内容的提问来源于stack exchange，提问作者James_kahosh