Jetpack Compose字体渲染与Figma存在差异，如何实现像素级对齐？

差异产生的原因 #

• 字体渲染引擎逻辑不同：Figma基于Skia引擎渲染文本，而Android默认采用HarfBuzz+FreeType组合，两者对字体内置字距微调（kerning）的处理规则存在细微差异——即使设置字间距为0，引擎也可能自动应用字符间的默认间距调整。
• 字体文件完整性差异：Figma中使用的可能是完整字体包，而Android端若引入子集化后的字体（仅包含项目用到的字符），子集化过程可能丢失部分字距相关的GSUB/GPOS元数据，导致渲染偏差。
• 文本布局计算规则差异：Figma与Compose的基线对齐、行高计算逻辑不同，这种布局层面的差异会间接造成视觉上的字间距观感偏差。
• 像素密度适配偏差：Android设备的dpi缩放逻辑，可能让文本实际渲染像素与Figma的1x画布产生错位，尤其是非整数倍缩放场景下，字体边缘的像素对齐差异会被放大。

像素级匹配的修复方案 #

• 禁用自动字距调整：在Compose的TextStyle中显式关闭引擎自动字距，强制使用设置的字间距：

  TextStyle(
      fontKerning = FontKerning.None,
      fontFamily = yourCustomFont,
      fontSize = 16.sp,
      // 其他样式属性
  )
  

• 同步字体文件：确保Android项目引入的字体文件与Figma使用的完全一致，若需子集化字体，保留字距相关的元数据表，避免关键信息丢失。
• 手动精确微调字间距：通过letterSpacing属性补平像素差异，对比Figma的逐像素结果，设置对应数值（推荐用px单位保证精度）：

  TextStyle(
      letterSpacing = (-0.3).px, // 根据实际差异调整正负及数值
      // 其他样式属性
  )
  

• 统一布局规则：将lineHeight设置为Figma指定的精确值，同时对齐textAlign方式，消除布局层面的间接影响：

  TextStyle(
      lineHeight = 24.px, // 与Figma行高完全一致
      textAlign = TextAlign.Left,
      // 其他样式属性
  )
  

• 启用像素完美预览：在Android Studio中打开「像素完美」模式（View > Tool Windows > Layout Inspector > Pixel Perfect），导入Figma设计图后逐像素对比调整，确保细节完全匹配。

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