[csswg-drafts] [css-fonts-4] Avoid font synthesis outside of variable range (#7999)

drott has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-fonts-4] Avoid font synthesis outside of variable range ==
We propose that if a variable font is declared and embedded with a `@font-face` and correctly declares its available ranges for font-weight and font-style or uses implicit `auto` ranges, no synthetic bolding or obliqueing should happen outside the supported or declared ranges of that variable font. 

Reasoning: We interpret that if an authors embeds and uses a variable font, the intent is to use the supported ranges of this font, and not trigger any synthesis on top. 

Otherwise what happens is a weird combination of font-designer-intended oblique or bold styles from the font, plus an additional synthetization applied by the UA.

One extreme example from Firefox (thanks to Munira (@tursunova) for test case and investigation) but similarly happens in Chrome (Chrome can't do variable obliqueing by number of degrees, but when it identifies a need for synthesis, then applies a fixed 20 degree skew):

```
    @font-face {
        font-family: "Inter";
        src: url('Inter-VF.subset.ttf');
    }
    .style60 {
        font-family: "Inter";
        font-size: 3em;
        font-style: oblique 60deg;
    }
```

<img width="193" alt="extreme slanting of the word text" src="https://user-images.githubusercontent.com/1021784/199697411-0c34c26d-e7c6-43f8-99e8-0dc4ed271317.png">

This was found while @tursunova and I worked on an issue extracted from this interop 2024 proposal: https://github.com/web-platform-tests/interop/issues/64 

### Related spec parts:


4.4. Font property descriptors: the [font-style](https://drafts.csswg.org/css-fonts-4/#descdef-font-face-font-style), [font-weight](https://drafts.csswg.org/css-fonts-4/#descdef-font-face-font-weight), and [font-stretch](https://drafts.csswg.org/css-fonts-4/#descdef-font-face-font-stretch) descriptors

> "User agents that implement synthetic bolding and obliquing must only apply synthetic styling in cases where the font descriptors imply this is needed, rather than based on the style attributes implied by the font data."

https://drafts.csswg.org/css-fonts-4/#font-style-matching

> If [font-synthesis-style](https://drafts.csswg.org/css-fonts-4/#propdef-font-synthesis-style) has the value auto, then for variable fonts with a slnt axis a match is created by setting the slnt value with the specified oblique value; otherwise, a fallback match is produced by geometric shearing to the specified oblique value.

### Additional references

https://bugs.chromium.org/p/chromium/issues/detail?id=1380486

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7999 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 3 November 2022 10:32:46 UTC