[csswg-drafts] [css-fonts-4] [varfont] Variation fonts deserve their own @-rules

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

== [css-fonts-4] [varfont] Variation fonts deserve their own @-rules 
==
[Migrated](https://github.com/w3c/csswg-drafts/issues/498#issuecomment-248246352)
 on behalf of @bramstein:

I'm a little worried this is overloading the @font-face syntax too 
much. Families are created using multiple @font-face rules, one for 
each "instance". A variation font already contains all variations, so 
it doesn't map very cleanly to @font-face. The new format hints and 
range proposals feel a little off to me for that reason.

I know this would be a substantial change, but would it be possible to
 define a new @ rule for variation fonts? Something like this:

```css
@font-variation {
  font-family: BodyText;
  src: url(bodytext-vf.woff2) format("woff2"),
       url(bodytext-vf.woff) format("woff");
}
```

This avoids extending the format hints and overloading the @font-face 
descriptors. As @nattokirai pointed out, most uses of variation fonts 
won't need weight, style, and stretch descriptors.

```css
@font-face {
  font-family: BodyText;
  font-weight: normal;
  src: url(bodytext-normal.woff2) format("woff2"),
       url(bodytext-normal.woff) format("woff");
}

@font-face {
  font-family: BodyText;
  font-weight: bold;
  src: url(bodytext-bold.woff2) format("woff2"),
       url(bodytext-bold.woff) format("woff");
}

@font-variation {
  font-family: BodyText;
  src: url(bodytext-vf.woff2) format("woff2"),
       url(bodytext-vf.woff) format("woff");
}
```

This would fall back to the two @font-face rules in browsers that do 
not support font variations. Browsers that support font variations 
would ignore the @font-face rules and use the @font-variation rule for
 everything.

For `font-stretch` I would prefer an integer range instead of a 
percentage. This allows the use of `calc` and makes the behaviour 
similar to the proposed `font-variation-settings`.

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

Received on Wednesday, 21 September 2016 23:37:04 UTC