(I apologize for not discovering this earlier, but it seems that Chrome-Android also does not support the font I intended to use. The fallback-to-sys-default-font-trick used by Chrome-Android did fool me.)
I had planned to incorporate unicode-range to address this issue, but unfortunately, it presented a stumbling block.
@font-face functionality works seamlessly on Desktop platforms but encounters difficulties on Android devices.
Below is the code snippet:
HTML
<p class="test">
The Chinese ellipsis should be vertically centered, such as U+2026, the HORIZONTAL ELLIPSIS character<br>
“中文省略号应该垂直居中……”<br>
</p>
CSS
@font-face {
font-family: "CJK Font";
src: local("Noto Sans CJK SC");
}
.test {
font-family: "CJK Font";
}
Demo:
I am using a Sony Xperia XZ1 (G8342) running Android 9 with Firefox Android version 96.3.1. The font Noto Sans CJK SC comes pre-installed on my phone.
When @font-face functions correctly, the Chinese ellipsis aligns vertically center. However, in Firefox-Android, this alignment does not occur, and instead displays with the system default font, causing the ellipsis to match Roboto rather than Noto Sans CJK SC.
Screenshots captured on the phone and via Firefox remote debugger can be viewed below:
https://i.sstatic.net/rR6Lw.png
https://i.sstatic.net/dmtjK.png
The @font-face url src functions properly on Firefox-Android, while the @font-face local src encounters issues.
An interesting observation is that @font-face local src operates smoothly on Firefox for PC.
Shown below is a screenshot from Firefox for PC for reference:
https://i.sstatic.net/ncPDB.png
The same issue persists on Chrome-Android, which surprised me. When setting html lang="zh-cmn-Hans", Chrome-Android defaults to the sys-default-font, which happens to be Noto Sans CJK SC, giving the impression of functionality. However, changing the language to lang="en" causes it to malfunction.
https://i.sstatic.net/u0mwB.png
This raises the question - Could this be a bug specific to Firefox-Android? Or have I overlooked something else?