備忘録的に。

事象

Android端末(tablet,スマホなど)でChromeを使ってWebページを開いた時に、

font-weight: 700
font-family: 'Noto Sans JP'

で指定されたテキストが太字になっていなかった。

PCのChromeから同じWebページを開くと該当のテキストはちゃんと太字になっていた。

原因

2023年6月現在に至るまで、googleはAndroidで日本語のfont-weightの値を1つしかサポートしていないため。

解説

このIssueにある内容まんまを書いてしまうのですが、
Androidでは、CJK(中国語、日本語、韓国語)フォントについては1つのfont-weight(400, Regular)しか無い模様。
英数字などはすべてのfont-weight(100~900)をサポートしているようです。

これにより、例えばbootstrapのfw-boldクラスなどを使ってテキストを太字にしようとすると、
elementにfont-weight: 700 !importantが付与されるようのですが
Androidだと700のweightはサポートしていないので、400のweightで表示されてしまうという罠。

で、このスレッドを見る限りこの問題は未だに解決していなさそう。
一部の端末では端末側でfont-weightの他のバリエーションをサポートしてくれているみたいです。

情報が間違っている場合は指摘お願いします。

参考

[Feature request] Fix CJK languages display issue with variable font (NotoSansCJK-VF)