webフォントでスマホ実機(iphone12mini)で見た時にweightが細くなるのはなぜ？

Question

NotoSansCJKjpを使用しています
PCサイト、google chromeの検証モードのSP版では問題なく表示されます。

スマホの実機(iphone12mini)で見てみるとboldがちゃんと掛かっていない、
weightが一回り細くなるように見える現象がおきています。
心当たりのある方はいますでしょうか？解決する方法があれば教えて頂きたいです。

下記はそのfont指定箇所です。

@font-face {
  font-family: "NotoSansCJKjpBold";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/NotoSansCJKjp-Medium.woff") format("woff"),
    url("../fonts/NotoSansCJKjp-Medium.otf") format("opentype");
}

$boldfont: "NotoSansCJKjpBold";

.ttlfont {
  font-family: $boldfont;
}

Comments

[m.ts10806]

画面キャプチャなど視覚的に比較できる情報を提示してください。
iPhone12Proを持っている回答者しか回答できないとなると、かなり狭まります。

[CHERRY]

iPhone 12 Pro 以外の実機ではどうなっているのでしょうか？

[Overrun]

600にしたら太く見えたので奇数設定だと反映されないとかでしょうか？
デザイナーさんの機種なので僕ももっていないのです。

[m.ts10806]

その機種がもつ解像度とかだけの影響に思います。
人の視覚情報って曖昧なものです。レイアウトに影響なければそれでいいとは思うのですけど。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、FirefoxよりもChromeの方が細く見えました。
font-size: 60px にすると違いはないようでした。
ですので、もしかするとフォントサイズが影響しているかもしれません。

ローカルサーバのHTMLをiOSで表示させてみたのですが、ファイアウォールのせいかフォントが効かなかったので確認できていません。

[Lhankor_Mhy]

しばらく待ってみたらフォントが効きました。
回線速度の問題でした????

スクリーンショットを上げるために、回答欄を借ります。

[Lhankor_Mhy]

もしかすると、そのデザイナーさんもフォントがダウンロードされて反映されるのが待ちきれず、代替フォントを見ているのかもしれないですね。

[Overrun]

みなさんご回答ありがとうございます
1ピクセルに拘るタイプの方なので説明対応が必要でした。
とりあえずスマホ版はbold値を100あげることで落ち着きましたので回答を締め切らせて頂きたいと思います。

Answer 1

特段、細いようには見えませんでした。
iOS14.4 iPhoneSE(1stgen)です。参考になれば幸いです。

↓Firefox85 Win10

↓Chrome88 Win10

Comments

[Overrun]

ありがとうございます。
やはりクロームの方が細く見えますね。原因は不明ですがCSSハックでなんとかなりそうです。
ありがとうございます。