執筆現在、Android版Chromeで太字（bold）が表示されない不具合が発生している模様です。
デベロッパーツールなどでは確認できない不具合なので気づいていない人も多いのではないでしょうか？
Chromeに限らず以前からAndroidだと太字が表示されないというデバイスがあるというのはご存知の方も多いかもしれません。
自分だけであれば、ベータ版のChromeを使用したりAndroid System WEBViewを無効化するなど対処法はあるのですが、サイト訪問者が全員それをしていることは考えづらいですね。
とりあえずAndroid版Chromeがアップデートされるまでにできる対処法をいくつか紹介します。
もくじ（見出しのまとめ）
text-shadowを使う
若干文字がにじむように見えますが、文字に影を付けることで擬似的に太字のように表現することが可能です。
基本的にはCSSに以下の記述でOKです。
1 | text-shadow: 0.3px 0 0.3px #333; |
0.3にしている部分が影の太さなので、適宜調整してください。
私の場合は、見出しと記事本文で使い分けることにしました。
たとえば見出し部分は以下のように記述しています。
1 2 3 4 5 6 | .article h1, .article h2, .article h3, .article h4{ text-shadow: 0.3px 0 0.3px #333; } |
一方本文の方は以下のように0.1にしています。
1 2 3 | #the-content .bold{ text-shadow: 0.1px 0 0.1px #333; } |
忘れがちなstrongタグの方も指定しておきましょう。
1 2 3 | strong{ text-shadow: 0.1px 0 0.1px #333; } |
今まで太字に指定していた時の太字指定はそのままにしています。
Chrome以外では「今までの太字指定＋影」が表現されるので影は細めにしていますが、太字指定そのものを削除するのであれば、1px程度でも良いと思います。
WordPressであればSearch Regrexというプラグインを使えば一括で書き換えることが可能です。
私の場合は、とりあえずChromeがアップデートされるまででよいので全てを書き換えることはしていません。
太字以外の強調表現に置き換える
どうしてもにじみが気になる場合には、太字以外の強調表現に変えたほうがよいかもしれません。
特に赤字かつ太字部分についてはかなりにじみが気になったので影をつけることは断念しました。
テキストシャドウで調整しなくても、その他の色やサイズで強弱をつけることも十分可能です。
この場合にもSearch Regrexを使うと楽にサイト全体を変更できます。
以上、備忘録的なお話でした。