React Native中fontSize设置无法匹配Figma设计稿字号如何解决

你观察到的全局10%尺寸偏差，本质是渲染基准不匹配导致的，和设备缩放因子无关：

• 单位基准认知偏差：React Native iOS端的fontSize、尺寸类样式的无单位数值，对应的是iOS系统逻辑点（pt）；而Figma中375x812画布下标注的px，是Figma自身渲染引擎的虚拟像素，在真机预览时Figma会默认做画布适配，其1单位的视觉尺寸比iOS原生渲染的1pt大8%-12%，刚好符合你测得的10%偏差。
• 文本渲染规则差异：Figma的文本渲染严格按照字体文件的全字身框占位，而iOS原生文本渲染会默认做字距压缩、抗锯齿优化，相同数值的字号下，Figma的文本视觉尺寸天然比iOS原生渲染结果大，这也是为什么你会觉得字号对不上的核心原因。
• 常见误区：网上流传的“3倍屏直接乘3”的换算方式完全错误，PixelRatio.get()在iPhone 11 Pro上返回的3是物理像素和逻辑点的转换倍率，直接乘这个值会把所有尺寸放大3倍，必然出现尺寸过大的问题。

不要依赖通用换算公式，按以下步骤校准可以100%匹配设计稿：

• 第一步：实测校准全局缩放系数
  在RN中写一个无border、无padding的纯色正方形，边长先写100，在iPhone 11 Pro真机上运行后截图；同时从Figma导出同位置1x倍率的100px边长正方形截图，将两张截图叠放对齐，测量RN渲染的正方形实际视觉边长，按以下公式计算系数：
  设计稿缩放系数 = Figma标注边长 / RN真机实际渲染边长
  按你目前观察到的10%偏差，这个系数约为1.1，必须以你自己实际测量的数值为准，不同系统版本、不同字体的偏差会有小幅浮动。
• 第二步：封装全局转换工具
  所有尺寸、字号不要硬写固定值，统一通过封装的函数转换，示例代码：

  // 替换为你自己实测得到的缩放系数
  const SCALE_FACTOR = 1.1;
  
  /**
   * 普通尺寸转换，用于宽高、边距、圆角等非字号样式
   */
  export const dp = (size) => size * SCALE_FACTOR;
  
  /**
   * 字号转换，专门用于fontSize属性
   */
  export const sp = (fontSize) => fontSize * SCALE_FACTOR;
  

  实际使用时，Figma标注14px的字号直接写fontSize: sp(14)，Figma标注20px的边距直接写padding: dp(20)，全局所有UI元素统一用该函数转换即可对齐设计稿。
• 第三步：修正文本细节偏差
  如果转换后文本仍有细微的上下边距、字距偏差，给全局文本组件加统一样式：

  const globalTextStyle = {
    includeFontPadding: false, // 移除安卓端默认字体上下内边距，iOS端无副作用
    textAlignVertical: 'center',
    // 若字距和Figma不一致，直接取Figma右侧属性面板的字距数值，作为letterSpacing的值传入即可，RN的letterSpacing单位和sp单位保持一致
  }
  

• 所有校准操作必须在真机上完成，模拟器的渲染缩放、PPI模拟和真机存在差异，校准结果不准。
• 如果设计稿未使用iOS系统默认的San Francisco字体，必须将对应字体文件导入RN项目，第三方字体的字身框尺寸和系统字体不同，导入后需要重新测量校准缩放系数。
• 不要在Figma的电脑端预览界面做尺寸对比，电脑显示器的PPI和手机屏幕不一致，对比结果没有参考价值，必须用同设备的截图叠放对比。

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