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

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

Fontify

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

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

使用命令行工具

全局激活插件：

$ pub global activate fontify

使用命令行工具生成字体文件和 Flutter 类：

$ fontify <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 YAML 配置文件路径。
  • -r 或 --recursive：递归查找 .svg 文件。
  • -v 或 --verbose：显示每个日志消息。
  • -h 或 --help：显示使用信息。

使用示例

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

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

...

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

命令行工具配置文件

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

fontify:
  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 文件夹。

示例代码

import 'dart:io';

import 'package:fontify/fontify.dart';

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

  // 输入数据
  final svgMap = {'icon': '&lt;svg viewBox="0 0 0 0"&gt;&lt;/svg&gt;'};

  // 生成字体
  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的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


fontify 是一个用于在 Flutter 中自定义字体的插件。它可以帮助你将自定义字体文件（如 .ttf 或 .otf）集成到你的 Flutter 应用程序中，并在应用程序中使用这些字体。以下是使用 fontify 插件的步骤：

1. 添加依赖

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

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

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

2. 添加字体文件

将你的自定义字体文件（如 .ttf 或 .otf）放置在项目的 assets/fonts 目录下。如果 assets/fonts 目录不存在，你可以手动创建它。

3. 配置 pubspec.yaml

在 pubspec.yaml 文件中，配置字体文件路径。例如：

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

在这个例子中，MyCustomFont 是字体的名称，MyCustomFont-Regular.ttf 和 MyCustomFont-Bold.ttf 是字体文件。

4. 使用 fontify 插件

在你的 Dart 代码中，使用 fontify 插件来应用自定义字体。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fontify Example',
      theme: ThemeData(
        fontFamily: 'MyCustomFont', // 设置默认字体
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fontify Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, world!',
              style: TextStyle(
                fontFamily: 'MyCustomFont', // 使用自定义字体
                fontSize: 24.0,
              ),
            ),
            Text(
              'This is a bold text',
              style: TextStyle(
                fontFamily: 'MyCustomFont',
                fontSize: 24.0,
                fontWeight: FontWeight.bold, // 使用加粗字体
              ),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用程序

现在你可以运行你的 Flutter 应用程序，并看到自定义字体被应用到文本中。

flutter run
回到顶部