- From: Florian Rivoal via GitHub <sysbot+gh@w3.org>
- Date: Thu, 01 Dec 2016 09:14:59 +0000
- To: public-css-archive@w3.org
I don't see how that would work, you cannot set different values of
`font-variation-settings` for different font faces.
It seems to me that we need a level of indirection, similar to how you
can do
```
@font-face {
font-family: foo;
font-weight: 700;
src: url('..../foo-700.otf');
}
@font-face {
font-family: bar;
font-weight: 700;
src: url('..../bar-900.otf');
}
.something {
font-family: foo, bar;
}
```
Maybe you're using the font stack to deal with the fact that one font
may be missing, or maybe you're using it due to different unicode
coverage. Either way, you want to use bar-900.otf when the
`font-weight` property is 700. There's a mismatch between 700 and 900,
and it is intentional, because these numbers are on an arbitrary
scale, so when you want to pair two fonts, you need to set up your own
scale and place these two fonts somewhere on it.
How do we do the same with font variations? With the current syntax
and semantics, you cannot:
```
@font-face {
font-family: foo;
font-weight: 500-700; /*use when the font-weight property is between
500 and 700*/
src: url('..../foo.otf'); /* I'd like to use the 500-700 range of
that font
when rendering, so all is good*/
}
@font-face {
font-family: bar;
font-weight: 500-700; /*use when the font-weight property is between
500 and 700*/
src: url('..../bar.otf'); /* I'd like to use the 700-900 range of
that font
when rendering because it is otherwise
comparatively
lighter than font foo, but I cannot
express it.*/
}
.something {
font-family: foo, bar;
}
```
I suggest we enable something along these lines:
```
@font-face {
font-family: foo;
font-weight: 500-700;
src: url('..../foo.otf');
/* the above is the same as font-weight: 500-700 / 500-700; */
}
@font-face {
font-family: bar;
font-weight: 500-700 / 700-900;
src: url('..../bar.otf');
/* use when the font-weight property is between 500 and 700,
but render it in with the 700-900 range,
mapping values from one range to the other linearly */
}
.something {
font-family: foo, bar;
}
```
(If you don't like slashes, we can have commas, keywords, or whatever,
that's not the point)
You cannot do that with `font-variation-settings` (or any other
property that does not distinguish between font faces), because you
need different values per font-face on the same element.
--
GitHub Notification of comment by frivoal
Please view or discuss this issue at
https://github.com/w3c/csswg-drafts/issues/528#issuecomment-264120393
using your GitHub account
Received on Thursday, 1 December 2016 09:15:06 UTC