Bug 209565 – Variable fonts with 'slnt' or 'ital' axes are not rendered correctly with font-style:italic, etc

• Status: NEW
• Component: Text

[Stephen Nixon]

Created attachment 394549 [details]
Screenshot of a test site for this issue

There is a collection of closely-related issues in the handling of variable fonts with either Slant (slnt) or Italic (ital) axes.

A test page detailing issues has been created here: https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests/index.html

---

For fonts with a 'slnt' axis, issues include:

• font-style:italic; & font-style:oblique; & <i> doesn't activate max clockwise (negative) slant, but rather, synthesizes a slant

• font-style:oblique XXdeg; doesn't correctly flip the positive/negative value when requesting font slnt, so fonts that follow the OpenType spec (using negative values for clockwise slant) do not work correctly. Additionally, fonts with a positive,  a counter-clockwise "backslant" cannot be activated.


For fonts with an 'ital' axis, issues include:

• font-style:italic; or <i> will activate the ital axis, PLUS incorrectly add a synthesized extra 20 degrees of slant

• font-style:oblique; doesn't activate ital=1, but rather, synthesizes a slant

---

There are two semi-related issues, but the linked-to test page attempts to better capture the range of related problems.

• https://bugs.webkit.org/show_bug.cgi?id=200369, "Slanted text in variable fonts is not rendered correctly"

• and maybe https://bugs.webkit.org/show_bug.cgi?id=189483, "Fonts which understand the 'ital' axis get synthetic italics"

[Radar WebKit Bug Importer]

<rdar://problem/60898228>

[Myles C. Maxfield]

Is this a duplicate of https://bugs.webkit.org/show_bug.cgi?id=189483 ?

[Stephen Nixon]

> Is this a duplicate of https://bugs.webkit.org/show_bug.cgi?id=189483 ?

No; this describes a fuller picture of the issues with font-style and variable fonts. 

I found that issue before filing this, and it is perhaps one part of this bug. However, I am confused by the comment there that “we erroneously apply synthetic bold.” I don’t see synthetic bold being applied in my test cases, only synthetic italics.  Did you intend to say “we erroneously apply synthetic italic”? If so, then that issue definitely falls under this issue's umbrella. However, this issue also describes the cases of how font-style should act for fonts with a 'slnt' axis.

[Ernst]

This should really be fixed. At the minimum, I would assume if a variable font has an "ital" axis, `font-style: italic` should use it and not apply aditional slanting.