Correct CSS styles for variable fonts

[simoncozens]

There's a bug in a private project (cc @emmamarichal) whereby proofing the italic styles is going wrong; the italic angle appears way too italic. This is because italicization is happening twice: once with the font-variation-settings CSS rule, and then a faux italic is being applied on top of that because we say font-style: italic.

The classic weight/width/style CSS rules were good for static fonts, because we had a number of files representing different members of a family and we wanted to use the CSS rules to tell the browser how they were connected together as a family. But in variable fonts, we just have one font, and its style information is conveyed through applying font-variation-settings to the text; we don't need to tell the browser about weight/width/style separately - in fact it can cause these faux bold / faux italic problems if we do so.

So what we need to do is keep track of whether a font is variable or static; if it's variable, we just apply font-variation-settings to the text style, but if it's static, we put weight/width/style rules in both the font face definition and the text style.