面试题：Flutter中iOS和Android平台在字体显示上的差异及处理方法

iOS 和 Android 平台在字体显示方面的差异

字体默认样式：
- iOS：默认字体为 San Francisco（SF），字体风格简洁现代。
- Android：默认字体因系统版本和厂商定制而异，较常见的是 Roboto 字体（Android 5.0 - 7.1），之后是 Noto Sans 字体。不同厂商可能有自己的定制字体，如小米的小米兰亭等，导致在不同 Android 设备上字体风格存在细微差别。
字体大小：
- iOS：字体大小通常以点（point）为单位，在不同设备上，系统会根据屏幕分辨率等因素自动进行适配缩放，以保证视觉上的一致性。
- Android：字体大小以 sp（scaled pixels）为单位，开发者需考虑不同设备的屏幕密度进行适配。如果设置不当，可能在某些设备上字体显示过大或过小。
字体加粗：
- iOS：字体加粗通常通过设置 UIFontWeightBold 等权重来实现，效果相对较为平滑。
- Android：在 XML 布局中通过 android:textStyle="bold" 设置加粗，在代码中可通过 Typeface 设置。不同字体在加粗后的效果可能有所不同，部分字体加粗后会显得比较生硬。
字体斜体：
- iOS：同样通过设置字体权重或相关属性实现斜体效果，如 UIFontItalicTextStyle。
- Android：通过 android:textStyle="italic" 或 Typeface 设置斜体，不同字体的斜体样式差异较大。
字间距：
- iOS：默认字间距相对固定，字体排版紧凑。
- Android：不同字体的字间距可能有所不同，并且部分 Android 设备或应用可能会对字间距进行调整，导致显示效果不一致。

通过代码处理差异以保证字体显示一致性

使用 google_fonts 插件：
- 首先在 pubspec.yaml 文件中添加 google_fonts 依赖：

dependencies:
  google_fonts: ^[latest_version]

在代码中使用：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: GoogleFonts.poppinsTextTheme(
          Theme.of(context).textTheme,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Font Consistency'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: GoogleFonts.poppins(),
          ),
        ),
      ),
    );
  }
}

google_fonts 提供了一系列跨平台的 Google 字体，通过这种方式可以在 iOS 和 Android 上使用相同的字体，减少因默认字体不同带来的差异。

自定义字体：
- 将自定义字体文件（如 .ttf 或 .otf）添加到项目的 fonts 目录下，并在 pubspec.yaml 中声明：

fonts:
  - family: MyCustomFont
    fonts:
      - asset: fonts/MyCustomFont-Regular.ttf
      - asset: fonts/MyCustomFont-Bold.ttf
        weight: 700

在代码中使用自定义字体：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(fontFamily: 'MyCustomFont'),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Font Consistency'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontFamily: 'MyCustomFont'),
          ),
        ),
      ),
    );
  }
}

通过自定义字体，确保在两个平台上使用完全相同的字体，避免因平台默认字体不同导致的显示差异。

适配字体大小：
- 使用 MediaQuery 获取设备的屏幕信息，根据平台特性调整字体大小。例如：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double fontSize = MediaQuery.of(context).size.width < 600? 16.0 : 20.0;
    if (Theme.of(context).platform == TargetPlatform.iOS) {
      fontSize = fontSize * 1.1; // 示例调整，可根据实际情况优化
    }
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Font Consistency'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: fontSize),
          ),
        ),
      ),
    );
  }
}

通过这种方式可以根据平台特点和设备屏幕信息对字体大小进行调整，保证在不同平台上字体显示大小的一致性。

面试题：Flutter中iOS和Android平台在字体显示上的差异及处理方法

知识考点

面试题答案

iOS 和 Android 平台在字体显示方面的差异

通过代码处理差异以保证字体显示一致性