Flutter中FontWeight.w500在Android系统没有加粗效果的问题

​首先先看一张设计图，这是我们公司 App 中的一张设计图， 因为要节省开发资源，设计师只针对 iOS 出一套设计图，然后 Android 和 iOS 实现相关的设计效果（Android 也会在个别地方做一些微调）。

从截图中可以看到，「按科室问医生」这个标题，字体使用的是 PingFangSC-Medium，这是苹果系统中的一款字体：苹方-简 中黑体。

如果使用 Android 原生来开发，从截图中看到，Zeplin 已经给我们自动生成了 TextView 的代码：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/ping_fang_sc_medium"
    android:textStyle="normal"
    android:textSize="24sp"
    android:textColor="@color/grey2"
    android:lineSpacingExtra="3sp"
    tools:text="按科室问医生"    />

但是在实际开发，我们并不会直接使用上述代码，因为这样需要在 Android 项目中引入苹方字体库，该字体库大概 77M，而且还涉及到版权问题。Android 这边实际代码如下：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textStyle="bold"
    android:textSize="24sp"
    android:textColor="@color/grey2"
    android:includeFontPadding="false"
    tools:text="按科室问医生"    />

我们会设置 android:textStyle="bold" 对字体进行加粗来实现设计效果。

最近我们对这个页面进行 Flutter 改造，遇到了 Flutter 字体加粗在 Android 上无效的问题，下面介绍一下该问题以及我们采用的解决方法。

这个页面是我们 iOS 同学负责开发的，按照 Zeplin 上的设计图，使用 FontWeight.w500 实现 PingFangSC-Medium 的设计效果，代码如下：

Text(
  "按科室问医生",
  style: TextStyle(
    fontSize: 24,
    color: Color(0xff333333),
    fontWeight: FontWeight.w500,
  ),
)

结果验收的时候，被设计师发现，Android 没有加粗，为了查找原因，我专门写了一个 Demo:

​Text(  
  "按科室问医生 normal",  
  style: TextStyle(
    fontSize: 24,
    color: Color(0xff333333),
  ),
),
Text(
  "按科室问医生 medium",
  style: TextStyle(
    fontSize: 24,
    color: Color(0xff333333),
    fontWeight: FontWeight.w500,
  ),
),                
Text(
  "按科室问医生 bold",
   style: TextStyle(
     fontSize: 24,
     color: Color(0xff333333),
     fontWeight: FontWeight.bold,
   ),
)

在 Android 和 iOS 中运行效果如下：

从截图中可以看到，FontWeight.w500 在 Android 系统上对中文是没有加粗效果的，Flutter Github 上关于这个问题也有相关的 issues：

github.com/flutter/flu…

github.com/flutter/flu… 

github.com/flutter/flu…

不过这些 issues 都被关闭了，官方解释道 Flutter 使用的是系统的默认字体，Android 系统内置的中文字体不支持不同程度的粗细。如果在 Android 上想实现 medium 的效果，可以使用较重的粗细字体，比如 FontWeight.w500 没有效果，可以使用 FontWeight.w600。

前文已经说到我们的设计图是针对 iOS 系统设计的，除了 medium 还会有 light、regular、semibold、bold 等不同程度粗细的字体。为了能够更好的适配 Android 和 iOS，最终我们的兼容方案是利用扩展方法 extension，定义了几个常量：

extension FontWeightExt on FontWeight {
  static const FontWeight light = FontWeight.w300;
  static const FontWeight regular = FontWeight.w400;
  static FontWeight medium = Platform.isAndroid ? FontWeight.w600 :FontWeight.w500;
  static const FontWeight semibold = FontWeight.w600;
  static const FontWeight bold = FontWeight.w700;
}

然后在需要设置字体粗细的时候，使用 FontWeightExt 中定义的 medium、bold 等常量

Text(
  "按科室问医生",
  style: TextStyle(
    fontSize: 24,
    color: Color(0xff333333),
    fontWeight: FontWeightExt.medium,
  ),
)

第一次写博客，写的不好，大家多多见谅，如果你有更好的方案，欢迎留言指正。目前我们已经把 Flutter 应用到公司项目，并且已经上线运行了一段时间。

在实际使用 Flutter 的过程中，遇到了一系列问题，比如与原生 App 的集成问题、原生切图复用问题，Method Channel 传递 Boolean 值报错问题、Flutter Module 打 AAR 并上传到 Maven 仓库问题、Method Channel 调用原生方法问题等等，如果大家有感兴趣的，欢迎留言，我会针对大家比较关心的问题进行分享，和大家共同学习进步。