[css-fonts] unicode-range issues

I've noticed a couple implementation issues with unicode-range that
I think need tightening up in the spec.

Issue 1: need to define which font is used when only font metrics are needed

The current definition of 'unicode-range' specifies that a font is
only downloaded if text within the page uses characters within the
range defined by the 'unicode-range' descriptor value.

>From the font matching algorithm [1]:

> 5. If the matched face is defined via @font-face rules, user
>    agents must use the procedure below to select a single font:
> a. If the font resource has not been loaded and the range of
>    characters defined by the ‘unicode-range’ descriptor
>    value includes the character in question, load the font. 
> b. After downloading, if the effective character map
>    supports the character in question, select that font. 
> When the matched face is a composite face, user agents must
> use the procedure above on each of the faces in the
> composite face in reverse order of @font-face rule
> definition.

However, this doesn't explicitly say what should happen when font
metrics are needed. For example, an element might not use text at
all. Should a downloadable font be downloaded to get the font
metrics? If so, which face should be selected when 'unicode-range'
descriptors are used?


  @font-face {
    font-family: test1;
    src: url(myfont.woff);
    unicode-range: u+0-24f;

  @font-face {
    font-family: test1;
    src: url(myfont-specialsymbols.woff);
    unicode-range: u+21??;

  body { font-family: test1, serif; }

  div {
    height: 2ex;
    width:  2ex;
    background-color: red;

Which font should be used to determine the x-height for 'div'
elements if there is no text content in the page? One of the two
downloadable font faces? Or just use the fallback font?

Chrome has implemented this by matching whichever downloadable font
supports the space (u+20) character. This is obviously arbitrary but
I think any rule here will be arbitrary to some degree. I don't think
using the fallback font is ideal because the line metrics will vary
based on whether text content exists or not.

Issue 2: need to limit the concurrent loading of multiple fonts
within a single family when unicode ranges overlap


  @font-face {
    font-family: test2;
    src: url(myfont-fallback.woff);
    /* default - entire Unicode range */

  @font-face {
    font-family: test2;
    src: url(myfont-latingreek.woff);
    unicode-range: u+0-3ff;

  body { font-family: test2; }

  <body>This is a test!</body>

In this case, even though both fonts contain glyphs for the string
used, only the second font needs to be downloaded. To achieve this,
I think we should explicitly specify that only a single font within
a family for a given character is downloaded at a given time. So in
the example above, the fallback font would must never be downloaded.

I should note here that both Safari and IE11 download *all* faces in
a family, whatever the unicode-range value specified. I'm not sure
if this is a regression or not but it's definitely not desired
behavior I think.

unicode-range loading test


John Daggett
Mozilla Japan

[1] Font matching algorithm

Received on Monday, 27 October 2014 06:53:49 UTC