如何在 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)?的主要内容,如果未能解决你的问题,请参考以下文章