Font-Weight CSS Transition in Chrome

Question

Trying to get font-weight to gracefully transition from \'400\' to \'600\' using CSS but it doesn\'t appear to be working in Chrome. Is this a known bug or am

Answer 1

Fonts are not simple vector image collections (that's why svg fonts never took off). Opentype fonts include all kinds of magic to clamp fonts to the pixel grid, which makes it unrealistic to expect a font family to ever include every possible weight value.

Because fonts are not simple vector image collections they will also never resize linearly – there will be bumps to take the pixel grid into account.

This Google whitepaper explains why linear resizing does not work for text on current screens https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M/edit

which is why no browser will attempt it and they will all rely on pre-computed font weights.

That may change in a decade when retina displays are the lowest common denominator but current font tech targets current screens.

This Microsoft whitepaper documents some standard font weight values http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-components-postattachments/00-02-24-90-36/WPF-Font-Selection-Model.pdf

(but just because they are documented does not mean the number of fonts that actually include all of them is not quite small)

You can probably achieve the effect you want with an svg font and some javascript. The svg font will be crap for text use though.