You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Flutter自定义字体正确实现方法及iOS端适配失败问题求助

解决Flutter iOS端自定义字体不生效的排查步骤

这种iOS端字体无法正常加载的问题确实很让人困惑,毕竟Web端已经正常运行了,说明你的基础配置方向是对的。咱们可以从iOS平台特有的几个细节入手排查:

  • 确认字体是否被正确打包进iOS项目
    打开Xcode,进入你的项目的Build Phases -> Copy Bundle Resources,检查你的字体文件(比如Handel.ttf)是否在资源列表中。如果没有,手动把字体文件从项目的fonts文件夹拖到这个列表里,确保勾选了“Copy items if needed”。

  • 核对字体的实际名称与代码中的fontFamily是否一致
    很多时候字体文件名和它内部的实际名称并不相同,比如文件名是Handel.ttf,但字体的真实名称可能是Handel Gothic或者其他变体。你可以:

    1. 用Mac的字体册打开该字体文件,查看它的“全名”;
    2. 或者通过代码打印出设备上可用的字体列表,找到目标字体的正确名称:
      import 'dart:ui';
      
      void printAvailableFonts() {
        for (final font in window.fonts) {
          print('Available font: ${font.family}');
        }
      }
      

    调用这个方法后,在控制台找到你的字体名称,替换代码中的fontFamily: 'Handel'

  • 检查pubspec.yaml的缩进和路径是否正确
    YAML对缩进非常敏感,确保你的字体配置格式完全正确,比如:

    flutter:
      fonts:
        - family: Handel
          fonts:
            - asset: fonts/Handel.ttf
    

    同时确认asset里的路径和字体文件的实际位置完全匹配,包括大小写(iOS文件系统是区分大小写的)。

  • 清理iOS的Derived Data缓存
    打开Xcode,点击顶部菜单栏的Xcode -> Preferences -> Locations,找到Derived Data的存储路径,删除对应项目的文件夹,然后重新执行flutter run,避免旧缓存干扰。

  • 手动在Info.plist中声明字体
    虽然Flutter通常会自动处理,但某些情况下需要手动配置:在iOS项目的Info.plist中添加Fonts provided by application数组,把你的字体文件名(比如Handel.ttf)作为元素加入数组。

  • 重启真实设备
    如果是在真实iOS设备上测试,有时候系统的字体缓存会导致异常,重启设备后再重新安装应用试试。

这些都是iOS端自定义字体常见的“坑”,Web端因为字体加载机制不同所以不受影响,你可以按顺序尝试这些步骤,应该能解决问题。

内容的提问来源于stack exchange,提问作者Marco Jr

火山引擎 最新活动