font-weight失效移動安卓處理方法
1、BUG 現象
最近遇到一個奇怪的現象：一段文本設置了font-weight，但是在移動端中的瀏覽器中不顯示加粗。
左側是瀏覽器中移動端模擬器中的界面，可以看到對話框的標題和按鈕文字是加粗的，右側是真機開發中的對話框，標題和按鈕文本是不加粗的。多次測試，中文不會加粗，英文正常。瀏覽器兼容性測試後也沒問題，各種瀏覽器都是這樣的。
很鬱悶。
2、font-weight 失效原因
查閱了很多資料，最後發現是移動端設備字體的問題
首先，font-weight 取值範圍是 100-900 ，默認的是 400
400 對應 normal
700 對應 bold(加粗)
在 PC 中，字體很多，如果設置 font-weight 是 500 600 可以正確顯示。但是在移動端下，字體有限，所以設置 500 和 600 是無效的。根據圖中缺失填充的方法，如果缺少 500 ，那麼會向下取值400。這就是移動端上，設置 font-weight: 400 和 font-weight: 500 粗細相同的原因。
3、解決方法
我想到兩種解決方法
方法一：
移動端和PC端的字體都設置成通用，即 font-weight: normal 或者 font-weight: bold;
優點：這兩個值各種字體都可以取到，兼容性好，改動簡單
缺點：PC 端字體粗細沒有明確劃分，可能和設計圖紙不同
方法二：
PC 端設置字體是 font-weight:: 500 600, 然後CSS的媒體查詢，設置 bold.
這樣可以保證PC端字體粗細合適，移動端不會出錯。
/* 移動端設置通用加粗 */
@media screen and (max-width: 991.8px) {
.span1, .span2, .span3 {
font-weight: bold;
}
}
/* PC端設置不同程度的加粗 */
@media screen and (min-width: 991.8px) {
.span1 {
font-weight: 500;
}
.span2 {
font-weight: 600;
}
.span3 {
font-weight: 700;
}
}
4、參考資料
https://baike.baidu.com/item/font-weight
https://developers.weixin.qq.com/community/develop/doc/000686a28a00a05646d71125251000
https://segmentfault.com/a/1190000007787731?utm_source=tag-newest
https://blog.csdn.net/weixin_33774615/article/details/89133521
https://blog.csdn.net/weixin_43974907/article/details/94446536