Add variable font support via font-variation-settings CSS property #997
Conversation
- Parse font-variation-settings CSS property - Auto-map font-weight/stretch/style to variation axes - Apply variations during text shaping via rustybuzz - Add FontVariationSettings to presentation attributes for CSS cascade 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
The ``typos'' seem to be outside my PR |
Just for info, there is already a |
|
Looks good, but we need some tests. Which also means we have to find and add a free variable font here.
Not sure about "auto-mapping". Afaik a font can have a variation axis with any range. Meanwhile your code sets |
|
Thanks for the review! I've added tests using https://fonts.google.com/specimen/Roboto+Flex, a variable font with 13 axes (OFL 1.1 licensed). Tests added (14 total):
Regarding the wdth auto-mapping (50-200%): The hardcoded percentages are the CSS standard values per https://drafts.csswg.org/css-fonts-4/#font-stretch-prop. When applied to fonts with different axis ranges (Roboto Flex's wdth is 25-151), the font engine clamps to the supported range. This matches browser behavior. For example, font-stretch: ultra-expanded (200%) on Roboto Flex gets clamped to 151 by rustybuzz/ttf-parser. This is expected - it means "as expanded as this font supports." Moving parse_font_variation_settings to svgtypes: Happy to do this in a follow-up if you'd like, though as you noted it's not critical. |
Added 14 tests for font-variation-settings using a subsetted Roboto Flex variable font (OFL 1.1 licensed). The font preserves all 13 variation axes including wght, wdth, slnt, opsz, GRAD, and parametric axes. Tests cover: - Explicit font-variation-settings (wght, wdth, slnt, opsz, GRAD, XTRA) - Multiple axes combined - Auto-mapping from font-weight/stretch/style to variation axes - Priority behavior (explicit settings override auto-mapping) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
oetiker
force-pushed
the
varfont-support
branch
from
ec6c295 to
3d47ff4
Compare
|
I compared the output with the browser output for specific axis values ... and it does not match ... investigating ... |
|
Tests look good. Thanks! And I guess we could iron-out auto-mapping later, if someone would fine any issues. Matching at least the Chrome output is preferable. |
|
the output difference is as of yet unresolved, I have rendering the test svgs with chrome and firefox result in narrow output while rendering them to png with rust or c harfbuzz implementations give the much less narrow output. while the paremeter definitly has an influence, it just seems to be much less pronounced than with the browsers ... |
- Add `font-optical-sizing` CSS property support (auto/none) - When `font-optical-sizing: auto` (default), automatically set the `opsz` axis to match font size for variable fonts that support it - Fix variable font outline extraction to properly apply variations - Regenerate names.rs using codegen after adding FontOpticalSizing attribute - Update test reference images with correct variable font rendering The key fix ensures that font variations (wdth, wght, opsz, etc.) are applied consistently during both text shaping and glyph outline extraction, so both letter positioning AND letter shapes reflect the variation settings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
found and fixed ... font-optical-sizing support was missing ... this is set to see here for demo 49771e2#diff-644028718b75197f20d9637b7b96a77a7ee893aa8505860075af643503d053e4 |
|
@LaurenzV looks good to me. |
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
3 participants
Uh oh!
There was an error while loading. Please reload this page.