Flutter Web端阿拉伯/库尔德语文本渲染异常求助

Flutter项目中使用Text组件展示阿拉伯语/库尔德语文本时，移动端显示完全正常，但Web平台出现渲染异常：文本加粗、甚至无法正常识别，且该问题仅影响Text组件，AppBar中的文本显示正常。

示例1：基础页面代码 #

import 'package:flutter/material.dart';
import 'package:kleely/screens/admin/admin_drawer.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const AdminDrawer(),
      appBar: AppBar(
        title: const Text('سەرپەرشتیار'),
      ),
      body: const Center(
        child: Text('سەرپەرشتیار'),
      ),
    );
  }
}

预期效果 #

Web端异常表现 #

示例2：严重异常场景代码 #

import 'package:flutter/material.dart';

class SubscriptionOverlayBanner extends StatelessWidget {
  final VoidCallback onPressed;

  const SubscriptionOverlayBanner({super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      height: screenHeight * 0.2,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          height:
              MediaQuery.of(context).size.height * 0.2, // 20% of screen height
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.primary.withOpacity(0.9),
            borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
          ),
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'بەشداری هیچ پلانێکت نییە تکایە پلانێک دیاری بکە',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: onPressed,
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  child: Text("بەشداری پالن بکە", style: TextStyle(fontSize: 16)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

对应异常截图 #

Flutter环境信息 #

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.0, on macOS 14.0 23A5328b darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.81.1)
[✓] Connected device (3 available)
    ! Error: Arivan’s iPhone is busy: Fetching debug symbols for Arivan’s iPhone. Xcode will continue when Arivan’s iPhone is finished. (code -10)
[✓] Network resources

可行解决方案 #

1. 指定支持复杂脚本的字体 #

Flutter Web默认字体对阿拉伯语/库尔德语的字形组合支持不足，手动引入专业字体：

• 将Noto Sans Arabic、Noto Sans Kurdish等字体文件放入assets/fonts/目录
• 在pubspec.yaml中配置字体：

  flutter:
    fonts:
      - family: NotoSansArabic
        fonts:
          - asset: assets/fonts/NotoSansArabic-Regular.ttf
  

• 在Text组件中指定字体：

  Text(
    'سەرپەرشتیار',
    style: TextStyle(fontFamily: 'NotoSansArabic'),
  )
  

2. 禁用字体子集化 #

Flutter Web默认的字体子集化会破坏复杂脚本的字形关联，在pubspec.yaml中关闭：

flutter:
  fonts:
    - family: NotoSansArabic
      fonts:
        - asset: assets/fonts/NotoSansArabic-Regular.ttf
          subset: false

3. 升级Flutter版本 #

3.13.0版本存在Web端复杂文本渲染的已知问题，升级到最新稳定版：

flutter upgrade

4. 明确文本方向 #

用Directionality组件强制指定RTL（从右到左）文本方向：

Directionality(
  textDirection: TextDirection.rtl,
  child: Text('سەرپەرشتیار'),
)

5. 检查浏览器字体设置 #

部分浏览器默认字体不支持阿拉伯语/库尔德语，测试时切换到系统支持的字体，或在浏览器中强制使用指定字体。

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