Stenciljs应用中自定义字体无法正常显示求助

核心问题排查与修复步骤 #

1. 纠正字体格式错误
   你当前CSS里引用的tiff是图像格式，无法作为字体文件使用，直接替换为已有的Anurati-Regular.ttf，同时修正format参数：

@font-face {
  font-family: 'Anurati-Regular';
  src: local('Anurati-Regular'),
       url('../assets/Anurati-Regular.ttf') format("truetype");
}

2. 配置Stencil资源复制规则
   Stencil默认不会自动将assets文件夹复制到构建输出目录，需要在stencil.config.ts中添加copy配置（无此文件则新建）：

export const config = {
  namespace: 'friends-fx',
  outputTargets: [
    {
      type: 'www',
      copy: [
        { src: 'assets' }
      ]
    }
  ]
};

3. 优化字体兼容性与样式应用

• 为提升浏览器兼容度，建议补充woff2格式字体（可在线将TTF转换为woff2），更新@font-face规则：

@font-face {
  font-family: 'Anurati-Regular';
  src: local('Anurati-Regular'),
       url('../assets/Anurati-Regular.woff2') format('woff2'),
       url('../assets/Anurati-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

• 为#home样式添加备用字体，避免字体加载失败时显示异常：

#home{
  background-color: #C8B7A6;
  height:1000px;
  text-align: center;
  font-family: 'Anurati-Regular', sans-serif;
}

4. 验证字体文件与路径

• 确认Anurati-Regular.ttf是完整有效的字体文件，可在本地系统安装后预览，排除文件损坏问题。
• 启动开发服务器后，打开浏览器控制台的网络面板，检查字体文件是否返回200状态码；若出现404，说明路径配置错误，需调整url中的相对路径。

5. 样式作用域检查
   如果组件样式为默认的scoped模式，确认#home元素在当前组件的DOM范围内；或者将字体样式移至全局样式文件（如src/global/app.css），确保全局生效。

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