Figma to Flutter - 如何修复字体大小差异？答案

【问题标题】：Figma to Flutter - how fix font size difference? [duplicate]Figma to Flutter - 如何修复字体大小差异？
【发布时间】：2021-09-22 20:18:42
【问题描述】：

我在 Figma 中有一个设计。看起来不错。但是当我尝试在颤振中使用字体值时 - 我遇到了问题。我在 Figma 上选择的字体大小在应用程序的前端不会为肉眼呈现相同的结果。

例如，如果我在 Figma 上设置 12px 大小的文本，并在 Flutter 的前端文件上设置相同的 (12px) 大小，则生成的结果不匹配； Flutter 的应用字体大小似乎小于 Figma 屏幕，但它们的 px 大小设置为相同。

这是我的 textStyle 示例：

 final textMedium =  GoogleFonts.manrope(
    textStyle: TextStyle(
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.normal,
    fontSize: 12,
    color: Colors.black
 ));

可能是什么原因，我该如何解决？我需要一个“校正因子”。有什么建议吗？

【问题讨论】：

标签： flutter dart user-interface figma

【解决方案1】：

将您在 Figma 中的 UI 设计转换成一粒粒的盐。我经历过这一点，并注意到它们实际上看起来也不是 100% 相同。我通常只是顺其自然，但如果你真的想要，我只会增加 Flutter 上的字体大小并尝试尽可能匹配 Figma 中的 UI 设计。根据字体大小，使用转换因子会不一致。我相信这是因为像素大小可能会因设备而异，而 Figma 只关心画板大小（以像素为单位）。

【讨论】：