nextra
nextra copied to clipboard
shuding
There is a problem with the display of the uppercase M letter
Recently, I found a strange bug when browsing a webpage using nextra on my Xiaomi mobile phone: nextra displayed the capital letter "M" as "MIUI" (one of the logos of Xiaomi mobile phones)
Note the M in the diagram for MongoDB and MySQL.
I find it strange because the same problem doesn't appear on other sites, and it's not in nextra's documentation. But when I tried to use nextra, I found that the problem appeared again: as long as it is a capital "M" in the mdx file, it will be displayed as "MIUI".
I noticed that the font used by my phone is "MiSans" (the default font for Xiaomi phones), I tried to extract the font and look for this glyph, and found that the uppercase "M" in the nextra webpage is actually displayed as U+EEEF, But this area is a private area!
I tried to browse the source code of nextra and locate the problem:
https://github.com/shuding/nextra/blob/6c78843988ca66a8871f94c7705be2d1cffaad5b/packages/nextra-theme-docs/css/styles.css#L13
In this line of css code, "ss06" seems to be the culprit, just remove it and the page will return to normal. In other normal web pages, either the font-feature-settings are not used, or the custom font-feature-settings override the default settings of nextra as in nextra's documentation.
The following is a demo using "ss06":
The HTML:
<!DOCTYPE html>
<html lang="en">
<style>
@font-face {
font-family: MiSans;
src: url("MiSans-Normal.ttf");
}
html {
font-family: MiSans, sans-serif;
font-feature-settings: "ss06";
}
</style>
<h1>M</h1>
<h2>Main</h2>
<h2>Make</h2>
<h2>Memory</h2>
</html>
Github does not support uploading fonts. Here I use a compressed package to provide a font for testing. This font is the Normal variant of the default font for MIUI13 phones. MiSans-Normal.zip
I still don't know why this line of code does what, but I think it is necessary to make a modification, because Xiaomi phones are now shipped in huge quantities, which may affect the typesetting of nextra on hundreds of millions of Xiaomi phones.
Hmmm this is so weird. We are using ss06 as it has some nice details in SF Text that distinguish Nextra from other sites. I think the solution would be simply removing that feature.
Are you referring to SF Pro? If yes, is it possible for us to use ss06 only on mac devices? Because other devices do not use SF Pro as the browser default font. It would be great if this could be fixed without changing the display
