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
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
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




