W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2016

Re: [csswg-drafts] [css-fonts-4] [varfont] May want different properties for font matching and variation value

From: Florian Rivoal via GitHub <sysbot+gh@w3.org>
Date: Thu, 01 Dec 2016 09:14:59 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-264120393-1480583698-sysbot+gh@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

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:30:26 UTC