面试题：Flutter中Material Design主题的字体定制及适配不同平台

Question

阐述在Flutter的Material Design主题里，怎样定制字体样式，包括字体类型、大小、粗细等。同时，如何确保这些字体在不同平台（如iOS和Android）上都能良好适配和显示。

Answer 1

在Flutter的Material Design主题里定制字体样式可按以下步骤：

1. 定制字体样式

• 字体类型：
  1. 首先在pubspec.yaml文件中添加字体依赖。例如，若要使用自定义字体MyFont，将字体文件（如.ttf或.otf格式）放在assets/fonts目录下，然后在pubspec.yaml中配置：

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: assets/fonts/MyFont-Regular.ttf
        - asset: assets/fonts/MyFont-Bold.ttf
          weight: 700

2. 在主题中使用该字体，如在`MaterialApp`的`theme`中设置：

MaterialApp(
  theme: ThemeData(
    fontFamily: 'MyFont',
  ),
  home: HomePage(),
);

• 字体大小： 在ThemeData中通过textTheme来设置不同文本样式的字体大小。例如：

theme: ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 96, fontWeight: FontWeight.w300, letterSpacing: -1.5),
    headline2: TextStyle(fontSize: 60, fontWeight: FontWeight.w300, letterSpacing: -0.5),
    // 其他文本样式以此类推
  ),
),

• 字体粗细： 在设置字体样式时通过fontWeight属性设置字体粗细。如上述headline1样式中设置fontWeight: FontWeight.w300 ，FontWeight提供了多种预定义值，如FontWeight.w100到FontWeight.w900 ，FontWeight.bold等。

2. 不同平台适配

• 系统默认字体适配： Flutter会根据不同平台使用系统默认字体，若想在不同平台保持统一字体外观，可使用自定义字体。但如果要利用系统默认字体的优势，如在iOS上使用San Francisco字体，在Android上使用Roboto字体，可不设置fontFamily ，直接使用TextTheme的默认样式。这样在不同平台上会自动使用对应的系统默认字体。
• 字体大小适配： 为了使字体大小在不同平台和设备上看起来合适，可以使用MediaQuery获取设备信息来调整字体大小。例如，根据屏幕宽度来调整字体大小：

double screenWidth = MediaQuery.of(context).size.width;
double fontSize = screenWidth > 600? 24 : 18;

• 字体显示优化： 确保字体文件包含所需的字符集，以避免在不同平台上因字符缺失而显示异常。此外，在发布应用前，在多种iOS和Android设备上进行测试，检查字体的显示效果，包括不同分辨率、屏幕尺寸以及系统语言设置下的显示情况。