產品設計之動態字體大小

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