Flutter自定义原生字体插件native_font的使用

native_font 是一个Flutter插件，用于从本地端懒加载字体文件（支持ttf和otf格式）。其代码灵感来源于 google_fonts。

安装

要在项目中使用此插件，请在 pubspec.yaml 文件中添加 native_font 作为依赖项。

dependencies:
  native_font: <latest version>

请确保将 <latest version> 替换为最新版本号。

使用

iOS 设置

在 Swift 中：

NativeFontPlugin.fontDataHandler = { (familyName, weight, isItalic, callback) in
  if familyName == "Roboto" {
    var fileName = "Roboto-Regular.ttf"
    if weight == FlutterFontWeight.weight700 {
      fileName = isItalic ? "Roboto-BoldItalic.ttf" : "Roboto-Bold.ttf"
    } else if weight == FlutterFontWeight.weight400 {
      fileName = isItalic ? "Roboto-Italic.ttf" : "Roboto-Regular.ttf"
    } else if weight == FlutterFontWeight.weight500 {
      fileName = "Roboto-Medium.ttf"
    }
    callback(try! Data(contentsOf: Bundle.main.url(forResource: fileName, withExtension: nil)!))
  } else if familyName == "Caveat" {
    // ...
  }
}

在 Objective-C 中：

NativeFontPlugin.fontDataHandler = ^(NSString * _Nonnull familyName, FlutterFontWeight weight, BOOL isItalic, void (^ _Nonnull callback)(NSData * _Nullable)) {
  if ([familyName isEqualToString:@"Roboto"]) {
    NSString *fileName = @"Roboto-Regular.ttf";
    if (weight == FlutterFontWeight700) {
        fileName = isItalic ? @"Roboto-BoldItalic.ttf" : @"Roboto-Bold.ttf";
    } else if (weight == FlutterFontWeight400) {
        fileName = isItalic ? @"Roboto-Italic.ttf" : @"Roboto-Regular.ttf";
    } else if (weight == FlutterFontWeight500) {
        fileName = @"Roboto-Medium.ttf";
    }
    callback([NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:fileName ofType:nil]]);
  } else if ([familyName isEqualToString:@"Caveat"]) {
    // ...
  }
};

Android 设置

NativeFontPlugin.setFontDataHandler((familyName, fontWeight, isItalic, fontCallBack) -> {
  if (familyName.equals("Roboto")) {
    int familyId = R.font.roboto_regular;
    if (fontWeight == FontStyle.FONT_WEIGHT_BOLD) {
        familyId = isItalic ? R.font.roboto_bold_italic : R.font.roboto_bold;
    } else if (fontWeight == FontStyle.FONT_WEIGHT_NORMAL) {
        familyId = isItalic ? R.font.roboto_italic : R.font.roboto_regular;
    } else if (fontWeight == FontStyle.FONT_WEIGHT_MEDIUM) {
        familyId = R.font.roboto_medium;
    }
    fontCallBack.onFontLoadCompleted(fontResToByteBuffer(familyId));
  } else if (familyName.equals("Caveat")) {
    // ...
  }
});

Flutter 端使用示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Native Fonts'),
        ),
        body: Column(
          children: <Widget>[
            Text(
              'Caveat (Download in native after 3s)',
              style: nativeFontTextStyle(
                fontFamily: 'Caveat',
                fontSize: 30,
              ),
            ),
            Text(
              'Roboto',
              style: nativeFontTextStyle(
                fontFamily: 'Roboto',
                fontSize: 30,
              ),
            ),
            Text(
              'Roboto Italic',
              style: nativeFontTextStyle(
                fontFamily: 'Roboto',
                fontSize: 30,
                fontStyle: FontStyle.italic,
              ),
            ),
            Text(
              'Roboto Medium',
              style: nativeFontTextStyle(
                fontFamily: 'Roboto',
                fontSize: 30,
                fontWeight: FontWeight.w500,
              ),
            ),
            Text(
              'Roboto Bold',
              style: nativeFontTextStyle(
                fontFamily: 'Roboto',
                fontSize: 30,
                fontWeight: FontWeight.w700,
              ),
            ),
            Text(
              'Roboto Bold Italic',
              style: nativeFontTextStyle(
                fontFamily: 'Roboto',
                fontSize: 30,
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.italic,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

关于字体粗细

字体通常使用100~900之间的九阶有序值来划分其粗细（字体的厚度），其中normal等同于400，bold等同于700。许多情况下，一些通用的词描述被用来划分它们的粗细。常见的粗细值大致对应如下：

• 100 - Thin
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Regular (Normal、Book、Roman)
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

这些词汇通常包含在常规字体文件的命名中。

回退机制

当Flutter端使用的字体在本地端未注册或回调的字体数据无法正确加载时，会回退到默认字体，并且文本始终会被显示。

异步加载

得益于强大的 FontLoader 功能，当字体数据通过回调返回给Flutter端时，文本将自动刷新。