Web与Figma中字体表现不一致问题求助

问题1：Tusker Grotesk 5800 Super字符间距差异（针对_字符） #

• 验证字体文件一致性：导出Figma中使用的Tusker Grotesk 5800 Super字体文件，替换本地项目中的对应文件。Figma内置字体可能带有特定字距调整元数据，与你当前使用的本地文件存在差异。
• 启用字体 kern 特性：在CSS中为使用该字体的元素添加：

  .tusker-grotesk-text {
    font-feature-settings: "kern" 1;
    font-kerning: normal;
  }
  

  部分浏览器默认关闭了字体 kern（字距调整）特性，而Figma会默认启用，这是导致间距差异的常见原因。
• 针对特定字符微调：如果上述方法无效，用Figma的测量工具获取_字符的精确间距值，在Web端通过CSS针对性调整：

  .tusker-grotesk-text:has(span.underline-char) {
    letter-spacing: 0.015em; /* 替换为Figma测量的精确值 */
  }
  

  可给_字符包裹<span class="underline-char">来单独控制。

问题2：Helvetica Light Oblique显示为常规字重 #

• 修正Next.js字体导入配置：确保导入时正确指定字重和样式，Light字重对应数值300，斜体对应italic，示例代码：

  // app/fonts.js
  import { localFont } from 'next/font/local';
  
  export const helveticaLightOblique = localFont({
    src: '../fonts/Helvetica-Light-Oblique.woff2',
    weight: '300',
    style: 'italic',
    display: 'swap',
    subsets: ['latin'],
  });
  

  注意：必须使用数字字重值（如300），而非字符串'light'，否则Next.js无法正确识别字体属性。
• 检查字体元数据：用FontForge、FontBook等工具查看Helvetica Light Oblique文件的内部元数据，确认其字重为300、样式为italic。若元数据错误，可通过工具修改，或在CSS中强制指定：

  .helvetica-light-oblique-text {
    font-family: 'Helvetica Light Oblique';
    font-weight: 300 !important;
    font-style: italic !important;
  }
  

• 排查CSS规则冲突：用浏览器开发者工具查看元素的计算样式，确认没有其他CSS规则覆盖了font-weight或font-style属性。

通用排查步骤 #

• 强制刷新浏览器缓存（Ctrl+Shift+R），避免旧字体文件缓存导致的显示异常。
• 确保Next.js项目中没有其他字体加载逻辑干扰，比如全局CSS中的字体fallback设置。

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