fix(markup): use installed math fonts for MathML in Chromium

Chromium maps the math font family to a single font per platform, which
Linux and ChromeOS don't install, so MathML falls back to a text font and
its brackets and large operators don't stretch. Keep the browser's choice
and fall back to the math fonts those systems ship, instead of bundling
a font.

Assisted-by: Claude Code:claude-opus-5-5
This commit is contained in:
silverwind
2026-10-01 02:12:01 +02:00
parent 62e80124ce
commit 7388690e90
4 changed files with 6 additions and 38 deletions
+6
View File
@@ -2,6 +2,8 @@
/* fonts */
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
/* Chromium's "math" is a font Linux and ChromeOS don't ship, so fall back to the math fonts they do */
--fonts-math: math, "STIX Two Math", "DejaVu Math TeX Gyre", "Noto Sans Math";
/* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
@@ -107,6 +109,10 @@ samp,
font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
}
math {
font-family: var(--fonts-math);
}
/* there are many <code> blocks in non-markup(.markup code) / non-code-diff(code.code-inner) containers, for example: translation strings, etc,
so we need to make <code> have default global styles, ".markup code" has its own styles and these styles sometimes conflict.
TODO: in the future, we should use `div` instead of `code` for `.code-inner` because it is a container for highlighted code line, then drop this ":not" patch */
-10
View File
@@ -5,16 +5,6 @@
overflow-wrap: break-word;
}
@font-face {
font-family: NewComputerModernMath;
src: local("NewComputerModernMath"), url("../../fonts/NewCMMath-Book.woff2") format("woff2");
}
.markup math {
font-family: NewComputerModernMath, "Latin Modern Math", "STIX Two Math", "Cambria Math", math;
font-size-adjust: ex-height 0.52;
}
.markup > *:first-child {
margin-top: 0 !important;
}