Flutter中文字体支持插件chinese_font_library的使用

chinese_font_library 插件旨在优化Flutter应用中中文字体的跨平台渲染，提供多字重渲染和动态加载字体的功能。以下是该插件的详细介绍及完整示例代码。

Features

多字重的渲染

在不同平台上，默认情况下Flutter使用的系统字体多为西文字体，这导致了中文字体通常只能以normal或bold字重渲染，并且bold字重是通过计算得到的，而非原生的bold字重，影响了文本的观感。chinese_font_library 提供了.useSystemChineseFont()方法来修改textStyle、textTheme或themeData，以确保使用正确的中文字重。

• 修改 textStyle:

  Text(
      '你好世界 hello world',
      style: TextStyle(fontWeight: FontWeight.w100).useSystemChineseFont(),
  )
  

• 修改 textTheme:

  return MaterialApp(
      ...
      theme: Theme(
          data: ThemeData(
            textTheme: yourCustomTextTheme.useSystemChineseFont(),
          ),
      ),
      ...
  )
  

• 修改 themeData:

  return MaterialApp(
      ...
      theme: Theme(
          data: yourCustomThemeData.useSystemChineseFont(),
      ),
      ...
  )
  

动态加载字体

对于想要使用自定义中文字体的开发者来说，由于中文字体文件通常较大，将其直接打包到应用安装包中并不是最佳选择。chinese_font_library 支持通过网络动态加载字体，仅需下载一次即可使用。

DynamicFont.url(
    fontFamily: 'CustomFontFromWeb',
    url: 'https://raw.githubusercontent.com/LastMonopoly/chinese_font_library/master/example/assets/SmileySans-Oblique.ttf',
).load()

Results

Roadmap

Reference

Flutter 小技巧之玩转字体渲染和问题修复

Contributions

由 LiTang0908 开发维护

示例代码

下面是一个完整的示例应用程序，演示如何使用chinese_font_library插件：

import 'dart:math';

import 'package:chinese_font_library/chinese_font_library.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final customFontFamily = "CustomFont${Random().nextInt(1000)}";

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      localizationsDelegates: const [
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('zh', ''),
        Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'),
        Locale('en', ''),
      ],
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () async {
              final stopwatch = Stopwatch()..start();
              await DynamicFont.url(
                fontFamily: customFontFamily,
                url:
                    'https://raw.githubusercontent.com/LastMonopoly/chinese_font_library/master/example/assets/SmileySans-Oblique.ttf',
              ).load();
              stopwatch.stop();
              debugPrint(
                  "Font loading uses ${stopwatch.elapsedMilliseconds} ms");
            },
            icon: const Icon(Icons.download),
          ),
        ),
        body: Center(child: FontWeightDemo(fontFamily: customFontFamily)),
      ),
    );
  }
}

class FontWeightDemo extends StatelessWidget {
  final String? fontFamily;
  const FontWeightDemo({super.key, required this.fontFamily});

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      shrinkWrap: true,
      children: FontWeight.values
          .map(
            (weight) => FittedBox(
              child: Text(
                '你好世界 hello world',
                style: TextStyle(
                  fontFamily: fontFamily,
                  fontWeight: weight,
                ).useSystemChineseFont(),
              ),
            ),
          )
          .toList(),
    );
  }
}

此代码创建了一个简单的Flutter应用，展示了如何动态加载自定义字体，并通过不同的字重显示文本。点击AppBar上的图标可以触发字体的动态加载过程，并在控制台打印出加载所花费的时间。