Open voborl00 opened 3 years ago
Do you happen to know which more modern CSS defines that now?
Thank you for your quick reply. As I can see it, this topic seems like a developing matter, so probably letting this system font (keyword) collection configurable/overridable by a user would be the best approach.
Anyway, there is some agreement valid for few last years which uses these keywords in a sans serif font definition: -apple-system BlinkMacSystemFont system-ui sans-serif
For example Bootstrap is using this in font-family definition: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, "Helvetica Neue", Arial, "Noto Sans",sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
When we combine it with CSS spec (I also found out, that sanitizer library puts incoming font-family (or other identification) to lower case), this should be a sufficient list of fontLiterals3: "serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", "math", "emoji", "fangsong", "-apple-system", "blinkmacsystemfont",
My sources are:
https://github.com/necolas/normalize.css/issues/665
https://fontsarena.com/blog/operating-systems-default-sans-serif-fonts/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#values
It's been a while since I read CSS specifications as part of my job, but starting at html.spec's reference list links to [CSSFONTS]
which leads to https://drafts.csswg.org/css-fonts/#generic-font-families
Maybe we could start with the list under "2.1.3. Generic font families" which seems to agree largely with your list and extend with some of the vendor specific strings that you found.
I think the relevant code is in
Hi, thank you for looking into it!
Yes, combining Generic font families from CSS specs with the vendor-specific strings would solve the issue for now and some period in future :)
Some of the test shows the problem, look at
I think this is the same issue as #232
When sanitizing element with inline font-family css attribute, generic-named font family names with hyphens/dashes are wrongly quoted with single quotes (Generic family names are keywords and must not be quoted, source: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name). It seems that sanitizer's source of truth for this behaviour is CssSchema fontLiterals3 which has only some of generic-name font families enumerated.
Please provide a way to extend/configure/override this fontLiterals3 set as some non-generic-name values (like '-apple-system') should not be quoted as well.
<p style="font-family:sans-serif , 'system-ui' , '-apple-system'">text</p>