每日见闻之Flutter 怎么设置全局字体

火柴就是我2025-07-22 17:11

1 在项目中添加字体文件，位置无所谓只要自己能找到

2 在yaml文件声明

yaml 复制代码

fonts:
  - family: CalSans-Regular
    fonts:
      - asset: assets/fonts/CalSans-Regular.ttf

之后我们用的字体就是 CalSans-Regular

3 设置全局字体

3.1 在 MaterialApp 的theme设置

css 复制代码

theme: ThemeData(
   fontFamily: "CalSans-Regular",

3.2 在Material 的 textStyle 设置

less 复制代码

 Material(
  color: bgColor ?? const Color(0xFFECECF7),
  textStyle: const TextStyle(
    fontFamily: "CalSans-Regular"
  ),

等等等。。。

但是发现设置了之后，可能还是有部分不生效

4 为什么不生效呢？

ini 复制代码

@override
Widget build(BuildContext context) {
  final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
  TextStyle? effectiveTextStyle = style;
  if (style == null || style!.inherit) {
    effectiveTextStyle = defaultTextStyle.style.merge(style);
  }
  if (MediaQuery.boldTextOf(context)) {
    effectiveTextStyle = effectiveTextStyle!.merge(const TextStyle(fontWeight: FontWeight.bold));
  }

上面的代码是Text 组建的build方法中的代码，注意这里 DefaultTextStyle，如果我们没有手动给Text的style 设置字体，那么就会使用这里返回的DefaultTextStyle 中的字体。

DefaultTextStyle.of(context) 这种代码大家应该很熟悉，就是向上查找找到第一个指定类型的 InheritedWidget。

在 Material MaterialApp 这些组件中设置字体，最终也是生成了一个DefaultTextStyle，包裹住了他的子组件。

如果你设置了字体但是不生效，大概率就是在组件链中被插入了DefaultTextStyle，导致没有应用你设置的字体。

同理如果你只是想让局部应用某种字体，那么你也可以嵌套一层DefaultTextStyle。