离线使用carbon-components-svelte的字体配置问题求助

一、字体文件的获取与存放 #

1. 下载完整的IBM Plex字体包，包含所有需要的字重（Light/Regular/Bold等）、样式（如斜体），优先选择woff2格式文件
2. 在项目的static（SvelteKit项目）或public（普通Svelte项目）文件夹下创建fonts子目录，将所有下载的字体文件放入其中，比如路径为static/fonts/IBMPlexMono-Light.woff2

二、覆盖Carbon默认字体加载规则 #

Carbon组件默认会加载CDN字体，需通过全局样式覆盖为本地字体：

1. 在全局样式文件（如app.css/global.css）顶部添加以下代码，确保本地字体规则优先级高于Carbon默认规则：

/* 引入Carbon全局样式并指定层级 */
@import "carbon-components-svelte/css/globals.css" layer(carbon);

/* 在carbon层级下定义本地字体，按需补全所有需要的字体类型 */
@layer carbon {
  /* IBM Plex Sans 轻量字重示例 */
  @font-face {
    font-family: 'IBM Plex Sans';
    font-weight: 300;
    font-style: normal;
    src: local('IBM Plex Sans Light'), url('/fonts/IBMPlexSans-Light.woff2') format('woff2');
    font-display: swap;
  }
  /* IBM Plex Sans 常规字重示例 */
  @font-face {
    font-family: 'IBM Plex Sans';
    font-weight: 400;
    font-style: normal;
    src: local('IBM Plex Sans Regular'), url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-display: swap;
  }
  /* IBM Plex Mono 轻量字重示例 */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 300;
    font-style: normal;
    src: local('IBM Plex Mono Light'), url('/fonts/IBMPlexMono-Light.woff2') format('woff2');
    font-display: swap;
  }
  /* 继续添加其他需要的字重、斜体样式，以及IBM Plex Serif等字体族 */
}

2. 确保该全局样式文件在组件样式之前加载，保证覆盖生效

三、排查“Failed to decode downloaded font”错误 #

该报错通常由以下原因导致，逐一排查：

• 字体文件损坏：重新下载对应字体，检查文件完整性
• 路径错误：确认url()中的路径是否正确，SvelteKit的static、普通Svelte的public下的文件根路径为/，所以/fonts/xxx.woff2是正确路径
• 格式不匹配：确认字体文件为woff2格式，format('woff2')与文件格式一致，不要混用woff和woff2
• 服务器访问限制：开发环境下Vite/SvelteKit默认无CORS问题，若使用自定义服务器，需确保字体文件可正常访问

四、验证字体加载状态 #

打开浏览器开发者工具，切换到Application标签页查看Fonts选项，确认本地字体是否成功加载；同时检查Console中是否还有加载错误

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