在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣的知识点,而本篇讲继续介绍 Flutter 上关于 Text
的一个属性:FontFeature
, 事实上相较于 Flutter ,本篇内容可能和前端或者设计关系更密切。
什么是 FontFeature
? 简单来说就是影响字体形状的一个属性 ,在前端的对应领域里应该是 font-feature-settings
,它有别于 FontFamily
,是用于指定字体内字的形状的一个参数。
我们知道 Flutter 默认在 Android 上使用的是 Roboto
字体,而在 iOS 上使用的是 SF
字体,但是其实 Roboto
字体也是分很多类型的,比如你去查阅手机的 system/fonts
目录,就会发现很多带有 Roboto
字样的字体库存在。
所以 Roboto
之类的字体库是一个很大的字体集,不同的 font-weight
其实对应着不同的 ttf
,例如默认情况下的 Roboto
是不支持 font-weight
为 600 的配置:
所以如下图所示,如果我们设置了 w400
- w700
的 weight
,可以很明显看到中间的 500 和 600 其实是一样的粗细,所以在设置 weight
或者设计 UI 时,就需要考虑不同平台上的 weight
是否支持想要的效果。
回归到 FontFeature
上,那 Roboto
自己默认支持多少种 features 呢? 答案是 26 种,它们的编码如下所示,运行后效果也如下图所示,从日常使用上看,这 26 种 Feature 基本满足开发的大部分需求。
而 iOS 上的 SF pro
默认支持 39 种 Features , 它们的编码如下所示,运行后效果也如下图所示,可以看到 SF pro
支持的 Features 更多。
所以可以看到,并不是所有字体支持的 Features 都是一样的,比如 iOS 上支持 sups
上标显示和 subs
下标显示,但是 Android 上的 Roboto 并不支持,甚至很多第三方字体其实并不支持 Features 。
有趣的是,在 Flutter Web 有一个渲染文本时会变模糊的问题#58159,这个问题目前官方还没有修复,但是你可以通过给 Text
设置任意 FontFeatures
来解决这个问题。
最后,如果对 FontFeature 还感兴趣的朋友,可以通过一下资料深入了解,如果你还有什么关于字体上的问题,欢迎留言讨论。
-
如果你想了解更多的 features 类型,可以通过 https://en.wikipedia.org/wiki/List_of_typographic_features 了解更多;
-
如果你对自己的使用的字体支持什么 features 感兴趣,可以通过 https://wakamaifondue.com 了解更多;