产品设计之动态字体大小

简介: iOS的“设置” –> “显示与亮度” –> “文字大小”,可以修改默认的系统字体大小,当修改之后,系统自带的应用如信息等都会随之改变,手机QQ会随之发生变化: 而微信的字体大小并不会随系统的字体大小改变而改变,微信自己有设置文字大小的功能,在“我” –> “设置” –> “通用”-> “字体...

iOS的“设置” –> “显示与亮度” –> “文字大小”,可以修改默认的系统字体大小,当修改之后,系统自带的应用如信息等都会随之改变,手机QQ会随之发生变化:

而微信的字体大小并不会随系统的字体大小改变而改变,微信自己有设置文字大小的功能,在“我” –> “设置” –> “通用”-> “字体大小”中进行设置

 

iOS中如果想做到跟随系统默认的字体大小改变而改变,怎么实现呢,步骤如下:

1、设置字体的新式为UIFontTextStyle某个选项;

2、注册通知,监听字号改号改变时修改字体然后重新更新一下布局;

- (id)initWithStyle:(UITableViewStyle)style {
    if (self = [super initWithStyle:style]) {
        if (IOS_VERSION >= 7.0)
        {
            [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleContentSizeCategoryDidChanged:) name:UIContentSizeCategoryDidChangeNotification object:nil];
        }
    }
}
 
//
- (void)handleContentSizeCategoryDidChanged:(NSNotification *)notification
{
    //update font size/frame and view
}
 
更多细节可参考:
 
iOS中如果想实现字体大小随UILabel的宽度进行自适应,可使用adjustsFontSizeToFitWidth,更多详情可参考这篇文章: 详解UILabel的adjustsFontSizeToFitWidth值

 

Android默认是跟随系统字体大小改变而改变的,那如果想避免受系统字体大小的影响,如何处理(4.0开始,系统提供修改字体大小功能)?

方法一、将TextView的字体单位由sp改为dp;

方法二、在自定义的Activity中重写getResources方法;

@Override
public Resources getResources() {
    Resources res = super.getResources();
    Configuration conf = new Configuration();
    conf.setToDefaults();
    res.updateConfiguration(conf, res.getDisplayMetrics());
    return res;
}
 
更多详情可参考:
 
 
那React Native呢?写这篇文章也是因为发现了默认RN是跟随系统自带的字体大小变化而变化的,当时还比较惊讶,后来查文档发现默认就支持了,如果想禁用直接设置属性allowFontScaling为false(默认为true)
 
而如果你想根据不同的屏幕大小使用不同的字号,可以参考这里: how to set font size for different IOS devices in react native

目录
相关文章
|
1天前
|
数据可视化 搜索推荐 数据挖掘
惊叹号!6 款办公软件开启 J 人设计团队协作新高度!
本文介绍了6款适用于设计行业项目团队的可视化办公软件,包括国产的板栗看板及国际知名的Trello、Asana、monday.com、Basecamp等。各软件特色鲜明,如板栗看板的灵活定制与智能提醒,Trello的经典看板布局与插件生态,Asana的高度定制化视图与任务跟踪,monday.com的可视化规划与工作流自动化,Basecamp的简洁界面与集中沟通功能。文章旨在帮助设计团队选择合适的项目管理工具,提升协作效率,确保项目成功交付。
14 2
如果网站需要维护,背景图可以设计成这样
如果网站需要维护,背景图可以设计成这样
|
7月前
|
编解码 前端开发 UED
最常见的自适应布局方案
【4月更文挑战第2天】 最常见的自适应布局方案
77 9
|
编解码 前端开发 容器
ECharts力导向布局图增加滚动条
ECharts力导向布局图增加滚动条
|
前端开发 搜索推荐 UED
深入理解CSS选择器:选择正确的方式掌控样式与布局
在网页开发中,CSS选择器是塑造页面外观和交互的关键工具。然而,选择器的威力和权重的影响常常在样式冲突时变得复杂。本篇博客将带您深入了解不同类型的CSS选择器,探讨它们的用途和如何合理运用。我们还将解析CSS权重的计算方法,从内联样式到类、ID和伪类选择器,一一剖析权重如何影响样式的优先级。通过这篇博客,您将获得精确的选择器技能,轻松解决样式冲突,确保您的页面呈现出预期的外观和布局。让我们一起揭开CSS选择器和权重的神秘面纱,助力您的网页设计和开发之旅。
411 2
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
136 1
|
前端开发 容器
移动端页面布局中的流动布局(百分比布局)和弹性布局
移动端页面布局中的流动布局(百分比布局)和弹性布局
移动端页面布局中的流动布局(百分比布局)和弹性布局
|
编解码 前端开发 UED
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习rem布局吧。
404 0
每日一学—设置页面文字大小随屏幕大小变化而变化(rem布局)