产品设计之动态字体大小

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

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

 

iOS中若是想作到跟随系统默认的字体大小改变而改变，怎么实现呢，步骤以下：

一、设置字体的新式为UIFontTextStyle某个选项；

二、注册通知，监听字号改号改变时修改字体而后从新更新一下布局；

- (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开始，系统提供修改字体大小功能）？

方法1、将TextView的字体单位由sp改成dp；

方法2、在自定义的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