Inter variable font test

Tests how the Inter variable font is rendered by the web browser with the traditional style properties font-weight and font-style.

We can always use font-variation-settings to gain full control over variable font axes, which works as expected in all major browsers. This document does not make use of font-variation-settings.

Effective font-family:

Known issues:

• Safari 12.0: Defining font-weight in @font-face causes slnt axis to be maxed out by default, causing font-style:normal to be fully slanted/oblique/italic. This is counter-acted by using a specific @font-face for Safari that doesn't define font-weight.
• Safari 12.0: font-synthesis:none is required or else font-style:italic causes "double-slant" — the slnt axis gets maxed out as expected, but then faux oblique is applied on top of it, causing an overly extreme slant. This means that font-style:italic can't be used in Safari, and instead we use font-style:oblique which works in all major browsers. Note that this effects <em> and <i> which in Safari implicitly has font-style:italic.
• Chrome 69: Mapping of ital axis to font-style:italic is not supported.
• Firefox 62: Mapping of ital axis to font-style:italic is not supported.
• Edge 42: Mapping of ital axis to font-style:italic is not supported, nor is Mapping of slnt axis to font-style:oblique. Note: We use separate italic and upright font files for Edge in this test, which is why intermediate oblique degrees are displayed as either fully slanted or not slanted at all when viewing this in Edge.