Is there a way to set variable font-weight in viewport units? Like `font-weight: 60vw;` Or `font-weight: calc(60vw);` ? Why not? /cc @fantasai @davidbaron @Litherum @gregwhitworth @jpamental @djrrb @clagnut #ampersandconf
5
17
It’s because it needs a unit less value for weight, so that calc results in a vw or px unit being added. But there is work going on in the CSSWG on an update to calc to enable that!
1
1
Does it work for anything? Stretch needs a percent. Optsizing? Hmm.
2
I think that if you multiply the cake by 1% as a last operation it will end up as a percent, but I haven’t had a chance to test that...
1
1
Nope. Firefox & Safari: `font-stretch: calc(50*1%)` works. `font-stretch: calc(50vw*1%)` fails. Neither works in Chrome, even `font-stretch: 50%` fails. Edge, mystery box since there’s no Edge for Mac. Hm.
2
1
Right. The calculation you want is “50vw / 1vw * 1%” to get the units right. No implementation supports dividing by units (there was some trickiness with 0, IIRC, I don’t remember exactly). CSS did resolve fairly recently, though, to add it to the spec, albeit in the next level.
3
5
Wouldn't that just be a complicated way of writing 50% though? It wouldn't be relative to the viewport in any case, right?
1
I think the 1vw in @Litherum's answer should be changed to something in a different length unit (maybe px or em) to get variation as a function of viewport width. (Exactly what length is the interesting part... might need a more complicated expression too!)

Jul 1, 2018 · 8:09 PM UTC

2
2
I see, so the idea would be that the division is done with the computed lenght so it ends up as a number, makes sense now. That could be quite nice combined with min / max :)
1