Flutter自定义字体插件fontify_plus的使用

Flutter自定义字体插件fontify_plus的使用

fontify_plus 插件提供了一种简单的方式来将 SVG 图标转换为 OpenType 字体，并生成一个包含图标标识符的 Flutter 兼容类（类似于 CupertinoIcons 或 Icons 类）。

该插件完全用 Dart 编写，无需任何外部依赖。它兼容 dart2js 和 dart2native。

使用 CLI 工具

全局激活插件：

pub global activate fontify_plus

然后就可以使用以下命令：

fontify_plus <input-svg-dir> <output-font-file> [options]

必需的位置参数

  • <input-svg-dir>：输入目录路径，包含 .svg 文件。
  • <output-font-file>：输出字体文件路径。应该具有 .otf 扩展名。

Flutter 类选项

  • -o 或 --output-class-file=<path>：输出路径，用于包含图标的 Flutter 兼容类。
  • -i 或 --indent=<indent>：Flutter 类文件的前导缩进数量。默认为 “2”。
  • -c 或 --class-name=<name>：生成类的名称。
  • -p 或 --package=<name>：提供字体的包名称。用于通过包依赖提供字体。

字体选项

  • -f 或 --font-name=<name>：生成字体的名称。
  • --[no-]normalize：启用字体的字形规范化。如果每个图标大小和位置相同，则禁用此功能。默认为启用。
  • --[no-]ignore-shapes：禁用 SVG 形状到路径的转换（如圆、矩形等）。默认为启用。

其他选项

  • -z 或 --config-file=<path>：fontify_plus YAML 配置文件路径。
  • -r 或 --recursive：递归查找 .svg 文件。
  • -v 或 --verbose：显示每个日志消息。
  • -h 或 --help：显示使用信息。

使用示例

fontify_plus assets/svg/ fonts/my_icons_font.otf --output-class-file=lib/my_icons.dart --indent=4 -r

更新后的 Flutter 项目的 pubspec.yaml：

...

flutter:
  fonts:
    - family: fontify_plus Icons
      fonts:
        - asset: fonts/my_icons_font.otf

CLI 工具配置文件

fontify_plus 的配置也可以放在 YAML 文件中。在 pubspec.yaml 或 fontify_plus.yaml 文件中添加 fontify_plus 部分：

fontify_plus:
  input_svg_dir: "assets/svg/"
  output_font_file: "fonts/my_icons_font.otf"
  
  output_class_file: "lib/my_icons.dart"
  class_name: "MyIcons"
  indent: 4
  package: my_font_package

  font_name: "My Icons"
  normalize: true
  ignore_shapes: true

  recursive: true
  verbose: false

input_svg_dir 和 output_font_file 键是必需的。可以通过 --config-file 选项指定其他配置文件。

使用 API

可以使用 svgToOtf 和 generateFlutterClass 函数来生成字体和 Flutter 类。

API 使用示例位于 example 文件夹。

注意事项

  • 生成的 OpenType 字体使用 CFF 表。
  • 生成的字体使用版本 3.0 的 PostScript 表（即不包含字形名称）。
  • 支持的 SVG 元素：path, g, circle, rect, polyline, polygon, line。
  • 根据规范应用 SVG 变换。
  • <g> 元素的子元素被展开到根，并应用变换。忽略与组相关的其他内容，不支持组引用。
  • 考虑使用 非零填充规则。
  • 当 ignoreShapes 设置为 false 时，每个 SVG 形状（如圆、矩形等）的轮廓被转换为路径。注意，任何属性如 “fill” 或 “stroke” 都会被忽略，只使用轮廓，因此生成的字形可能与 SVG 图标不同。建议将 SVG 中的每个元素都转换为路径。
  • 当 normalize 设置为 false 时，建议 SVG 图标具有相同的高度。否则，最终结果可能不符合预期。
  • 生成 Flutter 类时，静态变量名称来自 SVG 文件名，转换为驼峰式命名并移除非允许字符。如果为空，则设置为 ‘unnamed’。如果名称已存在，则添加后缀 _{i+1}。

计划

  • 支持 svg-to-ttf 转换（需要完成曲线近似）。
  • 支持连字。
  • 支持字体变化。

贡献

任何建议、问题或拉取请求都欢迎。

许可证

MIT

示例代码

import 'dart:io';

import 'package:fontify_plus/fontify_plus.dart';

void main() {
  const fontFileName = 'fontify_plus_icons.otf';
  const classFileName = 'fontify_plus_icons.dart';

  // 输入数据
  final svgMap = {'icon': '<svg viewBox="0 0 0 0"><path d="M10 10 H 90 V 90 H 10 L 10 10"/></svg>'};

  // 生成字体
  final svgToOtfResult = svgToOtf(
    svgMap: svgMap,
    fontName: 'My Icons',
  );

  // 将字体写入文件
  writeToFile(fontFileName, svgToOtfResult.font);

  // 生成 Flutter 类
  final generatedClass = generateFlutterClass(
    glyphList: svgToOtfResult.glyphList,
    familyName: svgToOtfResult.font.familyName,
    className: 'MyIcons',
    fontFileName: fontFileName,
  );

  // 将类内容写入文件
  File(classFileName).writeAsStringSync(generatedClass);
}

更多关于Flutter自定义字体插件fontify_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义字体插件fontify_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fontify_plus 是一个用于在 Flutter 应用中轻松集成自定义字体的插件。它可以帮助你简化自定义字体的加载和使用过程，特别适用于需要加载大量字体的情况。以下是使用 fontify_plus 插件的基本步骤和示例：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 fontify_plus 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fontify_plus: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以获取依赖。

2. 添加字体文件

将你的自定义字体文件（例如 .ttf 或 .otf 文件）放在 assets/fonts 目录下。然后在 pubspec.yaml 文件中声明这些字体：

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

3. 使用 fontify_plus 插件

在 Dart 文件中导入 fontify_plus 插件并使用它来加载和生成字体代码。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 使用 fontify_plus 生成字体代码
  await Fontify.generateFonts();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fontify Plus Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'CustomFont', // 使用自定义字体
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fontify Plus Example'),
      ),
      body: Center(
        child: Text(
          'Hello, Custom Font!',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

4. 生成字体代码

Fontify.generateFonts() 方法会自动生成一个 generated_fonts.dart 文件，其中包含了字体的常量定义和相关的 Dart 代码。你可以在项目中使用这些生成的常量来引用字体。

5. 使用生成的字体代码

在生成的 generated_fonts.dart 文件中，你会看到类似如下的代码：

class Fonts {
  static const String customFont = 'CustomFont';
}

你可以在应用中使用这些常量来引用字体：

Text(
  'Hello, Custom Font!',
  style: TextStyle(fontFamily: Fonts.customFont, fontSize: 24),
);
回到顶部