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正是用于设置默认文本样式的。
举例如下:
本文名称:flutter等宽字体,flutter 自定义字体
本文URL:http://myzitong.com/article/dseoios.html