Bug 283393 – iOS 18: CJK characters appear bold with @font-face rule and San Francisco font src

• Component: Text
• Status: NEW

[Jeff Johnson]

Created attachment 473283 [details]
Sample HTML demonstrating the bug

Steps to reproduce:
1. Open the attached sample HTML file in Safari on iOS 18
2. Click the button "Add @font-face"

Expected results: The text does not appear bold.

Actual results: The CJK characters appear bold. The non-CJK characters do not appear bold. See the attached screenshot.

This bug occurs on iOS 18 but not on iOS 17.

The bug was originally found on www.google.com with the region set to Singapore; the sample HTML was derived from that. My Safari extension StopTheMadness Pro has a font replacement feature that adds @font-face rules to the document.

[Jeff Johnson]

Created attachment 473284 [details]
Screenshot of the bug

[Karl Dubost]

Created attachment 473289 [details]
font variation in FontBook on macOS

on iOS 18.2
This is happening for me only on the 3rd character, aka: 简

中文(简体)

Before: font-family is "Helvetica"
After:  font-family is ".AppleSystemUIFont"


CJK UNIFIED IDEOGRAPH-7B80
Unicode: U+7B80


I wonder which variations .AppleSystemUIFont is choosing to display Chinese characters. 

A way to mitigate this would be to specify the desired font to display Chinese characters. 

For example, PingFang TC Thin displays a non-bold version of the character.

[Karl Dubost]

Created attachment 473290 [details]
different font-weights before and after

I wonder if it is selecting a different font than the original one. 

Because there is no language attribute in the HTML. 
such as lang="zh", the system is probably trying to guess the font for the character. 

Here a test with different font weights and I wonder if it is selecting Mincho Pro, instead of a Chinese font.

[Karl Dubost]

Created attachment 473291 [details]
character with different 冷

ok I tried with
<div style="font-family: Helvetica;">
<p>Helvetica:</p>
    <p>no lang <span>冷</span></p>
    <p>JA <span lang="ja">冷</span></p>
    <p>ZH <span lang="zh">冷</span></p>
    <p>no lang <span>冷</span></p>
    
</p>
</div>
<p><button type="button">Add @font-face</button></p>


And it confirmed what I thought.
The character "冷" has a different representation in Chinese and Japanese. 

So when I apply the font-face. It converts the character to a Japanese font even when the language attribute is Japanese.. This seems like a bug.

[Radar WebKit Bug Importer]

<rdar://problem/140261696>