[css-fonts] Proposal for standardizing font timeout behavior

Font faces downloaded via @font-face can sometimes take a while on
slow connections.  Browsers have adopted some inconsistent default
behavior regarding timeouts and display.  Some Chrome team members
(including input from me) have put together a proposal to let authors
control this, which has received a good response from developers.  You
can find the full proposal at
<https://github.com/igrigorik/css-font-timeout/blob/patch-1/README.md>

The abbreviated proposal is to add a new 'font-rendering' descriptor
to @font-face, and a related 'font-rendering' property.

The grammar is:

font-rendering: optional | swap <time>? | mandatory <time>?

"optional" means that the font is nice to have.  If it's available at
the time the text starts rendering, it's used, but otherwise the UA
will fallback.  (It'll still download the font in the background, but
wont' do anything with it on this page load - subsequent page loads
might use it, though.)

"swap" means that the font is important, but not mandatory to read the
content.  The UA will render with a fallback until the font is
available, then swap to the downloaded font.  If <time> has passed
(default: 3s) without the font being available, the UA wont' swap even
if the font comes in (to avoid disrupting layout when people are
already deep into reading).

"mandatory" means that the font is necessary for rendering the
content.  The UA will block rendering of the text until the font comes
in (at which point it renders with the font) or the <time> (default:
3s) expires (at which point it renders with a fallback).  If the
timeout expires, and the font comes in later, the UA must swap in the
new font, regardless of how long it took.

FF and Chrome/Opera currently have a default of "mandatory 3s".  IE
has a default of "mandatory 0s".  Safari has a default of "mandatory
<infinite-time-value>".

When used as a property, the value applies to all the fonts specified
for the element, overriding the font's own rendering policy.  There
are some examples of using the property in the full proposal.

There's some history behind this proposal in the PR comments at
<https://github.com/KenjiBaheux/css-font-timeout/pull/5>, including
how we came up with this particular slicing of the grammar space.

Thoughts?

~TJ

Received on Friday, 24 October 2014 20:58:39 UTC