fix: add generic serif fallback before Segoe UI Emoji to fix glyph rendering issue #9351

This commit is contained in:
Sachintha Lakmin 2025-04-21 23:40:52 +05:30
parent debf2ad608
commit 48dc8e9367
No known key found for this signature in database
GPG key ID: 6A88A1FE5C8627D0
2 changed files with 21 additions and 3 deletions

View file

@ -124,6 +124,8 @@ export const CLASSES = {
export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai"; export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji"; export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
export const SERIF_FONT_FAMILY = "serif";
/** /**
* // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash. * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
* *
@ -144,6 +146,14 @@ export const FONT_FAMILY = {
"Liberation Sans": 9, "Liberation Sans": 9,
}; };
// Fonts to use as fallback before FONT_FAMILY_FALLBACKS
// FONT_FAMILY_FALLBACKS's Segoe UI Emoji fails to properly fallback
// for some glyphs: ∞, ∫, ≠
// so we need to have generic font fallback before it
export const GENERIC_FONT_FAMILIES = [SERIF_FONT_FAMILY];
export const getGenericFontsForFallbacks: () => string[] = () =>
GENERIC_FONT_FAMILIES;
export const FONT_FAMILY_FALLBACKS = { export const FONT_FAMILY_FALLBACKS = {
[CJK_HAND_DRAWN_FALLBACK_FONT]: 100, [CJK_HAND_DRAWN_FALLBACK_FONT]: 100,
[WINDOWS_EMOJI_FALLBACK_FONT]: 1000, [WINDOWS_EMOJI_FALLBACK_FONT]: 1000,

View file

@ -23,6 +23,7 @@ import {
getFontFamilyFallbacks, getFontFamilyFallbacks,
isDarwin, isDarwin,
WINDOWS_EMOJI_FALLBACK_FONT, WINDOWS_EMOJI_FALLBACK_FONT,
getGenericFontsForFallbacks,
} from "./constants"; } from "./constants";
import type { MaybePromise, ResolutionType } from "./utility-types"; import type { MaybePromise, ResolutionType } from "./utility-types";
@ -102,7 +103,14 @@ export const getFontFamilyString = ({
for (const [fontFamilyString, id] of Object.entries(FONT_FAMILY)) { for (const [fontFamilyString, id] of Object.entries(FONT_FAMILY)) {
if (id === fontFamily) { if (id === fontFamily) {
// TODO: we should fallback first to generic family names first // TODO: we should fallback first to generic family names first
return `${fontFamilyString}${getFontFamilyFallbacks(id)
// Fallback to generic family names first, then to specific font family names
// currently only serif is added as a generic font family
return `${fontFamilyString}
${getGenericFontsForFallbacks()
.map((x) => `, ${x}`)
.join("")}
${getFontFamilyFallbacks(fontFamily)
.map((x) => `, ${x}`) .map((x) => `, ${x}`)
.join("")}`; .join("")}`;
} }