Re: [csswg-drafts] [css4-fonts] support for OpenType font variations

Based on what [Myles has already written up,] 
here's my summary of what I think needs to be added.

The first step is to expand the range of values allowed for 
font-weight, font-stretch and define how to map font-weight, 
font-stretch and font-style to the axes present in a variable font. 
With an existing font family, these values would be used to select a 
specific face within a family. With a variable font family, these will
 be used to indicate values along standard font axes.

The OpenType spec [defines five standard axes] 

    'wght' : weight
    'wdth' : width (i.e. font-stretch)
    'ital' : italic
    'slnt' : slant
    'opsz' : optical size

### Basic font property definitions

The changes below attempt to map basic font properties into values 
along these axes.

    font-weight: normal | bold | bolder | lighter | <integer>

The `<integer>` is a positive number in the range [1..1000]. Values 
outside this range are invalid. For variable fonts, the weight values 
map directly into value along the weight axis. For values outside the 
defined range of weight axis as specified in the font, use the 
appropriate min/max value. For OpenType fonts, see the [description in
 the 'fvar' table] 
( for the 
definition of the standard 'wght' axis.

    font-stretch: normal |
                  ultra-condensed | extra-condensed | condensed | 
semi-condensed |
                  semi-expanded | expanded | extra-expanded | 
ultra-expanded |

The `<percentage>` value indicates the percentage relative to what a 
type designer has defined as the normal width. The `<percentage>` must
 be greater than 0 and other percentage values are invalid. For 
variable fonts, if the font defines explicit values for the keywords 
above, those values are used to map onto the width axis values. For 
OpenType fonts, these are [defined in the 'STAT' table] 
( When the 
font does not define explicit values for these, keyword values are 
mapped onto explicit axis values (TBD: mapping values and/or 
algorithm, better for this to be explicitly stated in the OpenType 
spec). See the [description in the 'fvar' table] 
( of the 
standard 'wdth' axis.

    font-style: normal | italic | oblique

This is the same as the existing definition. Unlike what Myles has 
sketched out, I'm proposing this remains the same. For variable fonts 
in OpenType, two axes have been defined, the 'ital' axis and the 
'slnt' axis (for slant). The value of 'italic' should map to the value
 [defined in the 'STAT' table] 
( The value 
of 'oblique' should map to the value [defined in the 'STAT' table] 
( If the 
value is 'italic' and the 'ital' axis does not exist, look for the 
value of 'oblique' and use the 'slnt' axis instead. Similarly for when
 'oblique' is specified but no 'slnt' axis exists. If neither axis 
exists, use synthetic oblique. Other combinations of values along 
either the italic or slant axes can be expressed using the 
`font-variation-settings` property defined below. 

### Custom variations

Variable font families are not limited to only using the existing 
axes, they can also include custom axes that a type designer creates 
specifically for a given design.

    font-variation-settings: normal | [ <string> <number> ]#

Similar to how `font-feature-settings` work, the values for this 
property specify the specific coordinates to be used with a variable 
font family. The value of `normal` implies used the default axis 
coordinates defined in the font data. The `<string>` value specifies 
the axis name specified in a variable font and the `<number>` 
indicates the coordinate along that axis. For OpenType fonts, these 
are [defined in the 'fvar' table.] 
( Axis values 
specified for standard axes override the value implied by 
`font-weight`, `font-stretch` and `font-style`.


    /* heavy weight, expanded width */
    font-variation-settings: "wght" 850, "wdth" 120;
    /* specify number of bullet holes in custom Western slab-serif 
design */
    font-variation-settings: "BLTH" 4;
    /* light weight, font-variation-settings overrides font-weight */
    font-variation-settings: "wght" 320;    
    font-weight: 850;

For brevity, I'm omitting the `font-optical-sizing` property as I 
think getting the basic handling of font axes is important to work out

### Format hint for webfont use

One of the big advantages of variable fonts for web usage is that a 
wide range of weights and widths can be stored in compact form. But to
 allow use with older user agents on platforms that don't support 
variable fonts, some sort of new format hint is needed.

Standard webfont font family with variable fonts, using a new 
`woff2-variations` format hint:

    @font-face {
      font-family: BodyText;
      src: url(fonts/bodytext-variations.woff2) 
           url(fonts/bodytext.woff2) format("woff2");

    @font-face {
      font-family: BodyText;
      src: url(fonts/bodytext-variations.woff2) 
           url(fonts/bodytext-italic.woff2) format("woff2");
      font-style: italic;

    @font-face {
      font-family: BodyText;
      src: url(fonts/bodytext-variations.woff2) 
           url(fonts/bodytext-bolditalic.woff2) format("woff2");
      font-style: italic;
      font-weight: bold;

    @font-face {
      font-family: BodyText;
      src: url(fonts/bodytext-variations.woff2) 
           url(fonts/bodytext-bold.woff2) format("woff2");
      font-weight: bold;

For a given set of **property** values of `font-weight`, 
`font-stretch` and `font-style`, the font matching algorithm would 
choose which font to download. In the example above, a user agent that
 supports OpenType variable fonts would download the font data once, 
since all @font-face rules use the same URL for the variable font 
case. Once the font had been downloaded, for variable fonts the user 
agent would apply the values of `font-weight`, `font-stretch`, 
`font-style`, along with `font-variation-settings`, to select the 
precise font coordinates to use.


    font: 820 condensed italic 100% BodyText, serif;

For user agents supporting variable fonts, this would download the 
variable font data and use a value of 820 for the 'wght' axis, lookup 
the mapping of 'condensed' in the font data for the 'wdth' axis and 
lookup the mapping of 'italic' in the font data for the 'ital' axis to
 determine the precise font instance used. For user agents not 
supporting variable fonts, the user agent would download the bold 
italic face and use that.

GitHub Notification of comment by nattokirai
Please view or discuss this issue at 
using your GitHub account

Received on Tuesday, 20 September 2016 02:43:06 UTC