- From: John Daggett via GitHub <sysbot+gh@w3.org>
- Date: Tue, 20 Sep 2016 02:42:58 +0000
- To: public-css-archive@w3.org
Based on what [Myles has already written up,]
(https://github.com/litherum/csswg-drafts/commits/variationfonts)
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]
(https://www.microsoft.com/typography/otspec180/fvar.htm):
'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]
(https://www.microsoft.com/typography/otspec180/fvar.htm) 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 |
<percentage>
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]
(https://www.microsoft.com/typography/otspec180/stat.htm). 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]
(https://www.microsoft.com/typography/otspec180/fvar.htm) 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]
(https://www.microsoft.com/typography/otspec180/stat.htm). The value
of 'oblique' should map to the value [defined in the 'STAT' table]
(https://www.microsoft.com/typography/otspec180/stat.htm). 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.]
(https://www.microsoft.com/typography/otspec180/fvar.htm) Axis values
specified for standard axes override the value implied by
`font-weight`, `font-stretch` and `font-style`.
Examples:
/* 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
first.
### 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)
format("woff2-variations"),
url(fonts/bodytext.woff2) format("woff2");
}
@font-face {
font-family: BodyText;
src: url(fonts/bodytext-variations.woff2)
format("woff2-variations"),
url(fonts/bodytext-italic.woff2) format("woff2");
font-style: italic;
}
@font-face {
font-family: BodyText;
src: url(fonts/bodytext-variations.woff2)
format("woff2-variations"),
url(fonts/bodytext-bolditalic.woff2) format("woff2");
font-style: italic;
font-weight: bold;
}
@font-face {
font-family: BodyText;
src: url(fonts/bodytext-variations.woff2)
format("woff2-variations"),
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.
Example:
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
https://github.com/w3c/csswg-drafts/issues/498#issuecomment-248186701
using your GitHub account
Received on Tuesday, 20 September 2016 02:43:06 UTC