问题描述:
最近在做移动端组件开发,碰到一个字重的问题,设计师想要font-weight: 500
,但是前端回复设计师安卓只支持font-weight: 700
,没人关心为什么不支持,然后我试了一下我的安卓手机(小米12)竟然支持font-weight: 500
,我觉得这事需要深入研究。
小米12默认浏览器截图:
默认大家对font-weight有一定的了解,如果不了解可以看下这篇文章 深入了解font-weight
安卓默认字体
通过谷歌官网可以查到安卓默认字体,中英文是不同的。
字体匹配算法:
根据 字体匹配算法 中font-weight的计算规则
大白话描述:
如果指定的font-weight数值,即所需的字重,能够在字体中找到对应的字重,那么就匹配为该对应的字重。否则,使用下面的规则来查找所需的字重并渲染:
- 如果所需的字重小于400,则首先降序检查小于所需字重的各个字重,如仍然没有,则升序检查大于所需字重的各字重,直到找到匹配的字重。
- 如果所需的字重大于500,则首先升序检查大于所需字重的各字重,之后降序检查小于所需字重的各字重,直到找到匹配的字重。
- 如果所需的字重是400,那么会优先匹配500对应的字重,如仍没有,那么执行第一条所需字重小于400的规则。
- 如果所需的字重是500,则优先匹配400对应的字重,如仍没有,那么执行第一条所需字重小于400的规则。
按照上诉字重计算可得出font-weight: 500
:
- 中文渲染字重为400,看上去没有变化
- 英文渲染字重为500,正常加粗
写在最后
有人给安卓提了一个Feature Request,希望谷歌支持完整字重,但是谷歌给的优先级是P3(低优先级)。
指望不上谷歌,可以看到国产厂商都在努力解决这个问题,纷纷推出了自己的字体,以下是我调查结果,有些品牌查不到,欢迎评论区补充:
手机品牌 | 系统 | 字体 | 是否支持字重 500 | 推出时间 | 参考链接 |
---|---|---|---|---|---|
苹果 | iOS | PingFang SC | 是 | iOS9 2016.09.27 | developer.apple.com/fonts/syste… |
小米 | miui | MiSans | 是 | miui13 2021年12月 | 小米推出全新 MiSans 字体:MIUI 13 系统内置 |
华为 | HarmonyOS | HarmonyOSSans | 是 | HarmonyOS2 2021年6月 | 华为鸿蒙伴生字体 HarmonyOS Sans |
OPPO | ColorOS | OPPO Sans | 是 | ColorOS7 2019年11月 | 又一免费商用中西文字体:OPPO Sans |
realme | realme UI | ||||
一加 | H2OS | 一加莹黑 | 是 | 2017年5月 | 一加推出的字体:一加莹黑(OnePlus Slate™) |
vivo | Origin OS | vivo Type | 否 | 未上线 | |
iQOO | Origin OS | vivo Type | 否 | 未上线 | |
荣耀 | Magic UI | ||||
魅族 | Flyme | 新系统字体 | 是 | Flyme9.2 2021年9月 | 魅族 Flyme 9.2 发布:全新系统字体、内存拓展、小窗模式 3.5 |
可以看到国产做的最好的是一加(OPPO),其次是华为、小米,2022年还不能大范围使用font-weight: 500
,但是我相信不久的将来安卓也可以用上font-weight: 500
了。
参考链接:深入了解font-weight