fix(emoji): flags render on Windows; "Twitter emoji" works again
Windows' emoji font has no flag glyphs, so 🇺🇸 (:flag_us:) showed as the letters "US". Two fixes: - A TwemojiFlags @font-face over the bundled Twemoji file, limited by unicode-range to the regional-indicator letters (U+1F1E6–1F1FF), is put in the font stack on Windows only. Every other emoji stays native, other platforms keep their own flags, and the file is fetched only when a flag is on screen. - The Appearance font setting overwrote --font-secondary with a stack that had no emoji families at all, so neither this nor the existing "Twitter emoji" switch reached message text. The font map now keeps var(--font-flags), var(--font-emoji) before the generic family. Verified in Chromium via CDP platform fonts: with a Windows user agent 🇺🇸 is drawn by "Twemoji Mozilla" while 😀 stays on the system emoji font; with a Linux user agent both stay native. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
c0e8334f03
commit
b71f9c95c6
@@ -37,11 +37,15 @@ import { zIndices } from '../styles/zIndex';
|
||||
import { OIDC_CALLBACK_PATH } from './paths';
|
||||
import { OidcCallback } from './auth/oidc/OidcCallback';
|
||||
|
||||
// The emoji families (Twemoji when "Twitter emoji" is on, Twemoji flags on
|
||||
// Windows — see SystemEmojiFeature) must sit before the generic family, or the
|
||||
// chosen font's stack silently drops them.
|
||||
const EMOJI_FONTS = 'var(--font-flags), var(--font-emoji)';
|
||||
const FONT_MAP: Record<string, string> = {
|
||||
system: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
||||
inter: "'InterVariable', sans-serif",
|
||||
'jetbrains-mono': "'JetBrains Mono', monospace",
|
||||
'fira-code': "'Fira Code', monospace",
|
||||
system: `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', ${EMOJI_FONTS}, sans-serif`,
|
||||
inter: `'InterVariable', ${EMOJI_FONTS}, sans-serif`,
|
||||
'jetbrains-mono': `'JetBrains Mono', ${EMOJI_FONTS}, monospace`,
|
||||
'fira-code': `'Fira Code', ${EMOJI_FONTS}, monospace`,
|
||||
};
|
||||
|
||||
function AppearanceEffects() {
|
||||
|
||||
Reference in New Issue
Block a user