smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added multiple generic fonts for fallback

Browse source
This commit is contained in:
Sachintha Lakmin 2025-05-02 17:34:57 +05:30
parent b89743a8cd
commit feaae5b622
No known key found for this signature in database
GPG key ID: 6A88A1FE5C8627D0
5 changed files with 48 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

49
packages/common/src/constants.ts
View file

@ -124,8 +124,6 @@ export const CLASSES = {
export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
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.
*
@ -146,27 +144,58 @@ export const FONT_FAMILY = {
"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: ∞, ∫, ≠
// 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 SERIF_GENERIC_FONT = "serif";
export const SANS_SERIF_GENERIC_FONT = "sans-serif";
export const MONOSPACE_GENERIC_FONT = "monospace";
export const FANTASY_GENERIC_FONT = "fantasy";
export const FONT_FAMILY_GENERIC_FALLBACKS = {
[SERIF_GENERIC_FONT]: 996,
[SANS_SERIF_GENERIC_FONT]: 997,
[MONOSPACE_GENERIC_FONT]: 998,
[FANTASY_GENERIC_FONT]: 999,
};
export const FONT_FAMILY_FALLBACKS = {
[CJK_HAND_DRAWN_FALLBACK_FONT]: 100,
...FONT_FAMILY_GENERIC_FALLBACKS,
[WINDOWS_EMOJI_FALLBACK_FONT]: 1000,
};
export function getGenericFontFamilyFallback(
fontFamily: number,
): keyof typeof FONT_FAMILY_GENERIC_FALLBACKS {
switch (fontFamily) {
case FONT_FAMILY.Excalifont:
return SERIF_GENERIC_FONT;
case FONT_FAMILY["Lilita One"]:
return FANTASY_GENERIC_FONT;
case FONT_FAMILY.Cascadia:
case FONT_FAMILY["Comic Shanns"]:
return MONOSPACE_GENERIC_FONT;
default:
return SANS_SERIF_GENERIC_FONT;
}
}
export const getFontFamilyFallbacks = (
fontFamily: number,
): Array<keyof typeof FONT_FAMILY_FALLBACKS> => {
const genericFallbackFont = getGenericFontFamilyFallback(fontFamily);
switch (fontFamily) {
case FONT_FAMILY.Excalifont:
return [CJK_HAND_DRAWN_FALLBACK_FONT, WINDOWS_EMOJI_FALLBACK_FONT];
return [
CJK_HAND_DRAWN_FALLBACK_FONT,
genericFallbackFont,
WINDOWS_EMOJI_FALLBACK_FONT,
];
default:
return [WINDOWS_EMOJI_FALLBACK_FONT];
return [genericFallbackFont, WINDOWS_EMOJI_FALLBACK_FONT];
}
};

8
packages/common/src/utils.ts
View file

@ -23,7 +23,6 @@ import {
getFontFamilyFallbacks,
isDarwin,
WINDOWS_EMOJI_FALLBACK_FONT,
getGenericFontsForFallbacks,
} from "./constants";
import type { MaybePromise, ResolutionType } from "./utility-types";
@ -103,12 +102,7 @@ export const getFontFamilyString = ({
for (const [fontFamilyString, id] of Object.entries(FONT_FAMILY)) {
if (id === fontFamily) {
// TODO: we should fallback first to generic family names first
// 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)
return `${fontFamilyString}${getFontFamilyFallbacks(id)
.map((x) => `, ${x}`)
.join("")}`;
}