Re: [csswg-drafts] [css-fonts-4] [varfont] Problem setting up a "4-style family" with variable fonts

Yes, it `font-feature-settings` was designed to be both a descriptor and a property. `font-variations-settings` could be the same. I think it should, since there will be many cases where the for example I might want to define my `font-style: italic` CSS family variant to be a specific instance of a variable font, using the `ital` axis, the `slnt` axis but also any other axis like `wght` for example. 

However, the behavior of the `font-weight` selector must be well-defined when it comes to interacting with `font-variation-settings`. For example, I may want to define my `font-weight: bold` CSS family variant to be an instance of my variable font that differs from the `font-weight: normal` CSS family variant on **something else than the `wght` value**. This would be especially important for "programmatic axes". A variable font may not even have the `wght` axis. 

```
@font-face {
        font-family: Hamstervar;
        src: url("Hamstervar-VF.ttf");
        font-weight: normal;
        font-variation-settings: "GRAD" 123, "wdth" 56; 
}

@font-face {
        font-family: Hamstervar;
        src: url("Hamstervar-VF.ttf");
        font-weight: bold;
        font-variation-settings: "GRAD" 185, "wdth" 73; 
}
```

should be possible to do. 

Note that in CSS Fonts 3, the `font-weight` descriptor is already restricted as it cannot use the values `bolder` and `lighter`, while the `font-weight` property can. The CSS Fonts 4 spec could say that if a `@font-face` rule uses a numeric `font-weight` descriptor, then the `"wght"` portion of the `font-variation-settings` descriptor must be ignored. 

BTW, using `font-variation-settings` as a descriptor would also be extremely important for `font-stretch`. I really want to be able to say: 

```
@font-face {
        font-family: Hamstervar;
        src: url("Hamstervar-VF.ttf");
        font-stretch: condensed;
        font-variation-settings: "wdth" 56; 
}

@font-face {
        font-family: Hamstervar;
        src: url("Hamstervar-VF.ttf");
        font-stretch: expanded;
        font-variation-settings: "wdth" 117; 
}
```



-- 
GitHub Notification of comment by twardoch
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1289#issuecomment-297104423 using your GitHub account

Received on Tuesday, 25 April 2017 17:25:38 UTC