如何在Flutter应用中通过字体URL嵌入网络字体？

没问题！我来告诉你怎么在Flutter里直接通过URL加载网络字体，不用本地asset文件~

方法一：手动使用FontLoader加载自定义URL字体 #

Flutter的dart:ui库提供了FontLoader类，能直接从网络URL加载字体，步骤如下：

1. 首先导入dart:ui包：

import 'dart:ui';

2. 在你的初始化逻辑（比如main函数或者页面的initState）中，创建FontLoader实例并加载字体：

Future<void> loadCustomFont() async {
  final fontLoader = FontLoader('CustomRaleway'); // 自定义字体家族名
  fontLoader.addFont(
    NetworkAssetBundle(Uri.parse('https://your-font-url.com/Raleway-Regular.ttf'))
        .load('Raleway-Regular.ttf'),
  );
  await fontLoader.load();
}

3. 调用这个加载方法，确保字体加载完成后再渲染UI。比如在main函数里：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await loadCustomFont();
  runApp(const MyApp());
}

4. 之后就可以像使用本地字体一样，在TextStyle里指定这个家族名：

Text(
  '这是用网络URL加载的字体',
  style: TextStyle(
    fontFamily: 'CustomRaleway',
    fontSize: 20,
  ),
)

方法二：使用google_fonts包（针对Google Fonts） #

如果你用的是Google Fonts，可以直接用官方的google_fonts包，它会自动从网络加载字体，不需要手动处理URL：

1. 在pubspec.yaml中添加依赖：

dependencies:
  google_fonts: ^6.1.0 # 请使用最新版本

2. 直接在代码中使用：

import 'package:google_fonts/google_fonts.dart';

Text(
  '这是Google Fonts加载的字体',
  style: GoogleFonts.raleway(),
)

注意事项 #

• 网络权限：确保你的应用有网络访问权限。Android需要在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET"/>；iOS默认允许网络访问，但如果是HTTP URL，需要在Info.plist中配置ATS例外。
• 加载状态：可以添加加载指示器，避免字体未加载完成时显示默认字体的闪烁问题。
• 错误处理：记得给字体加载的Future添加异常捕获，避免加载失败导致应用崩溃。

内容的提问来源于stack exchange，提问作者Darshana