flutter等宽字体,flutter 自定义字体

Flutter 上字体的另类玩法：FontFeature

在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中，已经介绍了很多 Flutter 上关于字体有趣的知识点，而本篇讲继续介绍 Flutter 上关于 Text 的一个属性： FontFeature ， 事实上相较于 Flutter ，本篇内容可能和前端或者设计关系更密切 。

创新互联建站拥有10余年成都网站建设工作经验,为各大企业提供网站设计制作、成都网站建设服务，对于网页设计、PC网站建设（电脑版网站建设）、成都app软件开发公司、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、申请域名等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

什么是 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 还感兴趣的朋友，可以通过一下资料深入了解，如果你还有什么关于字体上的问题，欢迎留言讨论。

基于网友的问题再补充一下拓展知识，毕竟这方面内容也不多 。

事实上在 dart 里就可以看到对应 FontWeight 约定俗称用的是字体集里的什么字体：

所以如果对于默认字体有疑问，可以在你的手机字体找找是否有对应的字体， 比如虽然我们说 roboto 没有 600 ，但是如果是 roboto mono 字体集是有 600 的 fontweight ，甚至还有 600 斜体： 。

另外注意这是 Flutter 而不是原生，具体实现调用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下对应的 setFontFamilies 相关逻辑，当然默认字体库指定在 typography.dart 下就看到，例如 'Roboto' 、 '.SF UI Display' 、 '.SF UI Text' 、 '.AppleSystemUIFont' 、 'Segoe UI' ：

另外如果你在 Mac 的 Web 上使用 Flutter Web，可以看到指定的是 .AppleSystemUIFont ，而对于 .AppleSystemUIFont 它其实不算是一种字体，而是苹果上字体的一种集合别称：

[图片上传失败...(image-40f5ce-1648368234737)]

还有，如果你去看 Flutter 默认自带的 cupertino/context_menu_action.dart ，就可以看到一个有趣的情况：

当然，前面我们说了那么多，主要是针对英文的情况下，而在中文下还是有差异的 ，之前的文章也介绍过：

例如，在苹果上的简体中文其实会是 PingFang SC 字体，对应还有 PingFang TC 和 PingFang HK 的繁体集，而关于这个问题在 Flutter 上之前还出现过比较有意思的 bug ：

当然后续的 #16709 修复了这个问题 ，而在以前的文章我也讲过，当时我遇到了 “Flutter 在 iOS 系统上，系统语言是韩文时，在和中文一起出现会导致字体显示异常" 的问题 ：

解决方法也很简单，就是给 fontFamilyFallback 配置上 ["PingFang SC" , "Heiti SC"] 就可以了，这是因为韩文在苹果手机上使用的应该是 Apple SD Gothic Neo 这样的超集字体库，【广】这个字符在这个字体集上是不存在的，所以就变成了中文的【广】；

所以可以看到，字体相关是一个平时很少会深入接触的东西，但是一旦涉及多语言和绘制，就很容易碰到问题的领域 。

Flutter发布Package(Pub.dev或私有Pub仓库)

  因为我们使用Flutter跨平台技术开发App时，会有很多公用组件，因为Flutter中一切皆为Widget，widget也比较细粒度，所以我们需要进行封装，用于一个项目或者公司不同项目中去~

  那么今天写写如何发布package或者插件到Pub.dev上，扯扯谈O(∩_∩)O哈哈~

《Flutter的拨云见日》系列文章如下：

1、Flutter中指定字体(全局或者局部，自有字库或第三方)

2、Flutter发布Package(Pub.dev或私有Pub仓库)

首先，我们知道flutter有四种工程模式：Flutter Application、Flutter Module、Flutter Plugin和Flutter Package。

我们这里就主要讲Package 纯Dart插件的发布吧，都差不多。

创建工程后，就可以编写你的公共组件，或者公用字体库呀啥的， 都行。

在更改下你的pubspec.yaml文件，修改下你的versionCode，项目名称，项目描述，作者等

如果上传失败试试????的命令：

在执行该命令时，可能会中途调到网页，要求你登录google账号，登录授权，到时候登录账号并授权就可以了。

因为我们直接使用flutter packages pub publish是发布到Pub.dev上，并不是发布到私有仓库，该怎么办呢？

其实呢，也很简单！像versionCode，项目名，等都和发布Pub.dev是一样的。没啥区别。

有两种方式：

就是这么简单o( ＠ )o

相信大家引用Pub.dev上的第三方库都会了哈，到处都是这里不讲了

在使用flutter pub get就可以拉到私有仓库项目了

以上就差不多聊了聊package发布和获取的事儿了，都很明了，大家可以试试，挺简单的。

PS: 写文不易，觉得没有浪费你时间，请给个点赞~ ????

Flutter实践--屏幕适配

做移动端开发的小伙伴都知道，针对不同型号和尺寸的手机要进行页面适配，且Android和iOS适配方案各不相同，那flutter端如何进行适配呢？以下为近期flutter开发过程中关于适配的一些学习和记录~~~~

说到flutter屏幕适配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不说以下几点????

默认宽1080px

默认高1920px

allowFontScaling为false，即不跟随系统字体大小设置变化

初始化单位为px

需要把context传进去，因为内部是通过 MediaQuery 来获取屏幕尺寸等相关信息的

无需再传context，因为内部是通过单例 window 来获取屏幕尺寸等相关信息的

作为iOS开发，之前都是以pt为参照进行比例适配的，且架构组已经定义了一套适配相关常量，传px进去不太方便，所以需要对flutter_screenutil进行扩展

公司设计图是以iPhone X的尺寸提供的即物理设备尺寸为375x812，像素比例为750x1624,像素密度比为2

初始化仍用px来初始化

dart sdk 2.7正式支持 extension-method ，即为已有类扩展方法，从 flutter_screenutil 这种 540.w 写法点进去，我们可以看到

flutter_screenutil为num类扩展了一系列简写方法，那我们当然可以按照它这种方式进行扩展

网上提供的解决方案：

第一步：修改 pubspec.yaml

第二步：执行 flutter pub get

第三步：重启 AndroidStudio

解决方案：去掉const即可

UI设计中px、pt、ppi、dpi、dp、sp之间的关系

Dart/Flutter - 扩展方法(ExtensionMethod)

【Flutter】按钮与文本（三）

此控件比较简单，按钮的功能可划分为UI样式与事件回调

这里将几种不同的按钮一起运行，做下对比动图如下：

这里对五种按钮进行column居中排列如下

Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。

TextStyle更多属性设置如下：

如果我们需要对一个Text内容的不同部分按照不同的样式显示，即富文本，这时就可以使用TextSpan，它代表文本的一个“片段”。

如上述，我们当然也可以在上述链接上添加手势事件，后续会提到。

在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。

举例如下：