如何在 Flutter 中使用开放式字体(OTF)?

Posted

技术标签:

【中文标题】如何在 Flutter 中使用开放式字体(OTF)?【英文标题】:How to use Open Type Font (OTF) in Flutter? 【发布时间】:2020-05-09 12:46:37 【问题描述】:

我在pubspec.yaml 中添加了字体,任何True Type Font 都可以正常工作。但是,当我添加 Open Type Font 时,它不起作用。

这是我在pubspec.yaml中添加字体的方法

  fonts:
    - family: Kufyan
      fonts:
        - asset: assets/fonts/Kufyan.otf

【问题讨论】:

您可以在此处添加您的pubspec.yaml 代码吗? 检查这个:flutter.dev/docs/cookbook/design/fonts 无论是ttf 还是otf,它都应该可以正常工作,您能否链接或提供您正在使用的字体。 【参考方案1】:

flutter最新版本v1.12.13不直接支持open type font(otf)。您必须以某种方式将 otf 转换为真正的字体(ttf)。在你的项目中使用之前,你可以使用这个第三方网站covert the font to ttf。您可以参考how to use custom fonts in flutter 上的指南了解更多信息。

Flutter 根据字体本身的元数据匹配字体系列。所以pubspec.yml中不需要定义family: Kufyan

【讨论】:

我用的是flutter v1.16.2,otf字体完全没问题 .ttc 字体怎么样?它似乎不适用于我的。 ***.com/questions/15455895/… 这可能对你有帮助 我使用的是flutter 2.2.3,并且经常使用字体,但是您不能“打开”高级otf功能【参考方案2】:

✔️ 2021 年 2 月 24 日起正式使用

证明

    从此commit (GitHub)

    当前文档状态看起来 here(Flutter 文档)

【讨论】:

【参考方案3】:

刚刚使用 Futter 1.20 进行了测试,看起来 OTF 字体可以按预期工作。我似乎在文档中找不到任何关于 Flutter 支持的字体类型的信息。

【讨论】:

【参考方案4】:

Flutter 引擎根据字体本身的元数据匹配一个系列中的字体。

(We should remove the style descriptors in pubspec.yaml now that they are obsolete).

在 pubspec.yaml 中将这些字体声明为不同的系列将起作用 围绕这个。

例子可以看here 你已经完成了。

但可能不支持otf。可能是因为谷歌字体。

如果还是不行的话……

您可以使用一个技巧,即通过 a 将 otf 转换为 ttf 第三方,即convertio 等。

然后你就可以把它当作普通字体了。

导入字体文件。 在 pubspec 中声明字体。 将字体设置为默认字体。 在特定小部件中使用字体。

【讨论】:

【参考方案5】:

Flutter 引擎根据字体本身中的元数据匹配系列中的字体,而不是 pubspec.yaml 清单中声明的​​样式描述符。 (我们应该删除 pubspec.yaml 中的样式描述符,因为它们已经过时了)。

Edmondsans 常规、中等和粗体字体包含元数据,将它们的权重分别声明为 400、410 和 420。但是,Flutter 文本子系统仅支持表示 100 的偶数倍数的字体权重桶 (https://api.flutter.dev/flutter/dart-ui/FontWeight-class.html)。所以这三种字体都映射到FontWeight.w400,字体样式匹配器无法根据粗细在这些字体之间进行选择。

在 pubspec.yaml 中将这些字体声明为不同的系列将解决此问题。

【讨论】:

【参考方案6】:
    使用此平台将 otf 字体文件转换为 ttf 字体文件。 https://convertio.co/otf-ttf/ 导入字体文件。 在 pubspec 中声明字体。 将字体设置为默认字体。 在特定小部件中使用字体。

这是使用自定义字体的示例和步骤。 https://www.xam-consulting.com/blog/adding-custom-fonts-in-flutter-application

【讨论】:

以上是关于如何在 Flutter 中使用开放式字体(OTF)?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 matplotlib 中使用(随机)*.otf 或 *.ttf 字体?

如何从 OTF、TTF 文件中查找字体版本

如何从 otf 或 ttf 文件中获取字体名称?

如何将日文 OTF 字体转换为与 FOP 一起使用

在 ggplot2 中使用自定义 OTF 字体

如何在 OpenType PostScript OTF 字体文件中用一个字形替换另一个字形?