如何处理不同分辨率类型的字体大小

Question

我正在 Pixel 2 模拟器上进行开发，当然，我使用的字体大小非常适合该手机。

在使用 iPhone 5S 时，我希望看到字体大小会减小并与屏幕分辨率成正比。或许 Flutter 做了点什么，但一开始是不是很容易看出来。

我找到了“flutter_screenutil”插件，但没有按预期工作。可能是因为我没有为ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); 设置正确的值。这些值是 iphone 6 的“设计中设备的屏幕尺寸”（基于示例）。

如果我在我的 Blackberry Motion(1080x1794) 上使用字体大小为 100 的插件，结果就是我所期望的。在 iphone 6(750x1334) 上使用相同的代码，我应该使用 70 号字体。不是很有用。

谁有一个很好的方法来处理不同分辨率的字体大小而不改变代码中的字体大小值？

Answer 1

您可以尝试使用 Google 字体。由于 Flutter 使用自定义字体，您可以将自定义字体应用于整个应用程序或单个小部件。在运行字体大小为 20 的“Pacifico”系列时，我没有看到任何问题。我还在 Pixel 3 和 Iphone 11 上测试了以下测试代码，没有发现任何问题。

步骤很简单，如 Flutter 文档中所述：

1. 导入字体文件。
2. 在 pubspec 中声明字体。在可能的情况下，我下载了 Pacifico 来自https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico
3. 在特定小部件中使用字体。

我的 pubspec.yaml 文件：

flutter: fonts: - family: Pacifico fonts: - asset: fonts/Pacifico-Regular.ttf 我的 main.dart 文件：

` Widget build(BuildContext context) {
 return MaterialApp(
   title: 'Font test',
   home: Scaffold(
     backgroundColor: Colors.white,
     body: SafeArea(
       child: Column(
         children: <Widget>[
           Container(
             height: 100.0,
             width: 100.0,
             color: Colors.red,
             child: Text(
               'container one',
               style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontSize: 20.0,
               ),
             ),
           ),
           Container(
             height: 100.0,
             width: 100.0,
             color: Colors.blue,
             child: Text(
               'container two',
               style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontSize: 20.0,
               ),
             ),
           ),
           Container(
             height: 100.0,
             width: 100.0,
             color: Colors.purple,
             child: Text(
               'container three',
               style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontSize: 20.0,
               ),
             ),
           ),

         ],
       ),
     ),
   )
 );
}

如果您对字体有任何问题，请告诉我，此外，正如您所看到的，它是基本的示例应用程序。如果您能帮助我提供代码示例以重现该问题，我将不胜感激。我没有我的 Mac 机器来帮你截屏。一旦我有我的 Maclaptop，我将使用屏幕截图更新此线程