专栏首页游戏杂谈产品设计之动态字体大小

产品设计之动态字体大小

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
}

更多细节可参考:

[1]iOS动态字体DynamicType的实现(1)

[2]动态字体,根据系统设置调整APP字体大小

[3]一文让你彻底了解iOS字体相关知识

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;
}

更多详情可参考:

[1]Android APP字体大小,不随系统的字体大小变化而变化的方法

[2]使应用中的字体不受系统设置影响的两种方法

那React Native呢?写这篇文章也是因为发现了默认RN是跟随系统自带的字体大小变化而变化的,当时还比较惊讶,后来查文档发现默认就支持了,如果想禁用直接设置属性allowFontScaling为false(默认为true)

https://facebook.github.io/react-native/docs/text.html#allowfontscaling

http://reactnative.cn/docs/0.31/text.html#allowfontscaling

而如果你想根据不同的屏幕大小使用不同的字号,可以参考这里:how to set font size for different IOS devices in react native

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两块网卡实现多台机器共享上网

    组建局域网内部网络,遇到的问题:购买电信的宽带,多人拨号肯定是不行的(貌似同时超过4台机器拨一个号就自动被断开网络了)。

    meteoric
  • 关于坐标旋转

    在看<Flash actionscript动画教程>(中文版)的第十章的第二节,它提到“高级坐标旋转”,书中只给出了一个基本公式:

    meteoric
  • Javascript倒计时

    运行示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...

    meteoric
  • CentOS下将php和mysql命令加入到环境变量中的几种方法

    Linux CentOS配置LAPM环境时,为了方便,将php和mysql命令加到系统环境命令,下面我们记录几种在linux下将php和mysql加入到环境变量...

    他叫自己MR.张
  • 部署elk平台

    说明 对于ELK部署使用而言,下面是一个再常见不过的架构了 Redis:接收用户日志的消息队列。 Logstash:做日志解析,统一成JSON输出给Elasti...

    零月
  • 腾讯云Dubbo-zookeeper实战

    2) 上传zookeeper-3.4.6.tar.gz文件到/usr/local/src/zookeeper下

    用户5224393
  • SpringMVC中controller返回json数据的两种方法

    用户2409797
  • django-装饰器创建

    #自定义装饰器 def jc(func): @wraps(func) def ff(request,*args,**kwargs): # 传入reques...

    kirin
  • 微信小程序下拉刷新上拉加载

    任我行RQ
  • 一套代码运行多端、如何打造跨多端统一框架 | 开源先锋日

    研发同学在端内既追求h5的灵活性,也要追求性能趋近于原生。面对入口扩张,主端、独立端、微信小程序、支付宝小程序、百度小程序、Android厂商联盟快应用,单一功...

    DevOps时代

扫码关注云+社区

领取腾讯云代金券