androidで、一部中国語(簡体字)がiPhoneのように表示されません

Question

前提・実現したいこと

中国語を用いたサイトを作成しています。
下記のように表示させたいのです

発生している問題・エラーメッセージ

androidだけ、このようになってしまいます。
（簡体の簡の部分だけ薄い）

該当のソースコード

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<li id="lang_zh-cn"><a href="https://misawa-airport.co.jp/zh-cn">简体中文</a></li>

#lang_zh-cn{
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans JP","Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

試したこと

・文字化けしないフォントを探しました。
・直接指定してfontfamilyを指定しています。
・Googleフォントを読み込みました。
・特に効いていないわけでなく、iPhoneは表示され、android（OPPO）でこうなってしまいます。

補足情報（FW/ツールのバージョンなど）

・Windows
・VSchord
・ほかに追記しているCSSはありません

・追記　2022/3/8　10:58
すみません、お恥ずかしい話なのですが、
↓このデバッグ画面では、効いていると言えないでしょうか。

もし分かる方がいらっしゃいましたら、宜しくお願いします。

Comments

[miyabi_pudding]

iPhoneでは効いているのが不可解ではありますが、
CSSの記述の仕方が原因な気がします。
質問記載のCSSだけでは、Webフォントの指定には不十分だと思いますので、
他にフォントに関して記載しているCSSがあれば、質問文に追記お願いします。

[Lhankor_Mhy]

preconnect の他、Googleフォントを読み込んでいる部分があると思いますので、そちらをご提示いただけますか？

[Lhankor_Mhy]

また、フォントのフォールバックが起きていると思いますので、太字になっている文字が何のフォントになっているのかご提示いただけますか？

[nomura02]

ありがとうございます。
ちなみに、WEBフォントを指定してもしなくても、こうなってしまいました。

"Noto Sans SC"
のGoogleフォントだけ抜きました。

#lang_zh-cn{
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans JP","Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
今はこのようになっていて、まだそのままです

[Lhankor_Mhy]

とすると、ローカルにインストールされているフォントで表示されているわけですので、そちらの問題のように思えます。
繰り返しになりますが、実際にはどのフォントにフォールバックされているのかを調べた方がいいのではないでしょうか？

[miyabi_pudding]

実際にフォント自体を読み込むためのlink要素が不足しているように思います。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap" rel="stylesheet">
などの、Webフォント自体を読み込む記述も追記してみて、それでも適用されないか確認お願いします。

また、Lhankor_Mhyさんがおっしゃる通り、
実際に何のフォントが適用されているか、を確認したほうが、解決の早道になるかと。

[Lhankor_Mhy]

「このデバッグ画面では、効いていると言えないでしょうか」とのことですが、font-family 指定は効いていると思います。
ですが、問題にしているのはそこではなくて、実際に表示されているフォントはどれか、ということです。

また、miyabi_takatsuk さんがおっしゃるように、Googleフォントを読み込めていないようですから、そこを改善して Noto Sans SC を使用するようにすれば解決する問題のように思えます。

[Lhankor_Mhy]

> 複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で**最初の**インストール済み、または @font-face アット規則を使用してダウンロード可能なフォントを選択します。
https://developer.mozilla.org/ja/docs/Web/CSS/font-family

[nomura02]

ありがとうございます！！上手く生きました。
Googleフォントをやめようかと思いましたが、お二方にご指摘頂いたように、
Googleフォントの読み込みが上手くいっていませんでした。

実際に表示されているフォントはどれか、というのは、スマホ画面を、スマホ上でスマホの開発ツールで検証するという、意味ですよね。。。？

[Lhankor_Mhy]

ご解決されて何よりです。

お手数ですが自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself

---

> スマホ画面を、スマホ上でスマホの開発ツールで検証するという、意味ですよね。。。？

あまり詳しくないですが、Andriod はPC上で検証ツールが使えるのではなかったかな、と思います。

[nomura02]

パソコンで検証ツール使えた気がしています。
後学のため、調べてみます！ありがとうございました！

Answer 1

下記のように書いていたのですが

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

これだけだと不十分だったので
ヘッドタグに下記のように書きました。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400&display=swap" rel="stylesheet">

お二人ともありがとうございます。

androidでも表示されました。