CSS fonts from Level 1 to Level 3

This article is to read the CSS standard document notes, but also on the CSS font related knowledge of a comb.

Cascading Style Sheets, level 1

CSS 1 defines font attributes including font-family, font-style, font-variant, font-weight, font-size, and Font. Its algorithm requires UA(User Agent) to search for matching CSS attributes character by character in a given element, first trying to match font style, such as ITALic and OBLIQUE. Font variant, normal non-small-CAPS font, Small-caps matches (1) fonts identified as small-caps, (2) fonts that compose small caps, and (3) fonts that replace lowercase letters with uppercase letters (small uppercase letters can be done by shrinking the uppercase letters of normal fonts). Font weight and font size are then matched, both of which must be matched successfully.

Font-family is a list of font or common font names in order of precedence, separated by commas to indicate that more than one font is selected.

body { font-family: gill, helvetica, sans-serif; }

Copy the code

There are two values: font name and generic font name. In the above example, Gill and Helvetica are the explicitly specified font names, while Sans-Serif is the generic font name. CSS 1 defines five common fonts:

• serif: serif
• sans-serif: a serif
• cursive: the handwritten
• fantasy: decoration
• monospaceSuch as: wide

In general, in addition to specifying a specific font name, you should end up specifying a generic font name. Also, if the font name contains Spaces, it must be enclosed in quotation marks.

Font style has three values: normal, ITALic, and OBLIQUE. Noraml is the normal font and ITALic is italic. Oblique may be used to derive the normal font by tilting it. For ITALIC, use OBLIQUE if there is no ITALIC font.

UA usually classifies font names that include Oblique, Slanted, or Incline as Oblique; UA classifies font names that contain Italic, Cursive or Kursiv as Italic.

Font-variant is mainly used to specify normal and small-caps. True small-caps fonts have smaller letters than capital letters and have slightly different proportions. However, if it is not a true small-caps font, you can reduce the capital letters in normal font. If you have to, you can just use capital letters.

CSS 1 supports only one variant of small-caps, but does not support other variants such as old numbers, small uppercase numbers, and tight or loose letters.

Font-weight Indicates the word weight. The keyword value is normal, bold, bolder, and lighter, and the value ranges from 100 to 900, indicating that the stroke is thicker and thicker. Normal corresponds to 400, bold corresponds to 700. Bolder and lighter are bolded or lightened relative to the word inherited from the parent element. Real fonts (font data) have one or more property values that describe the “weight” of the font. For example, values containing keywords such as Regular, Roman, Book, Medium, Semi-, DemiBold, Bold, or Black, depending on how normal the font is, seem to be considered Bold. Because of this, CSS 1 defines a set of values. OpenType uses nine numeric values to distinguish word weights, which can be directly matched. Not all fonts have that much weight, so CSS 1 also defines how to “search” forward and backward, such as 500 or 400 if not.

Font size defines absolute, relative, length, and percentage values. Absolute values include xx-small, X-small, small, medium, large, X-large and XX-large, which preserve the absolute size with a ratio of 1.5 times difference in UA. The relative value, which includes the larger and smaller keywords, depends on the absolute size of the parent element’s text. Negative values are not allowed.

Finally, font is shorthand for all of the above attributes, and you can set font-style, font-variant, font-weight, font-size, line-height, and font-family at the same time. This attribute borrows the shorthand for setting multiple attributes simultaneously in traditional typography.

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)

CSS 1 lays down the layout of font properties. CSS 2.1 only supplements and extends CSS 1.

First of all, CSS 1 only specifies that font family should be used as a back-up font. It does not specify the features or examples of these fonts. CSS 2.1 details serif, Sans-serif, cursive, Fantasy, and monospace.

Secondly, add the inherit keyword for all attributes. Also, font- Variant still supports only a variant of small-caps.

Finally, one of the most important additions to CSS 2.1 is the addition of six system font keywords for font abbreviations: Caption, icon, menu, message-box, small-Caption, and status-bar. For example, font: menu; You can have an element in a web page inherit fonts and attributes used in system menus. If the system menu uses a 12-pixel, 600-word Times, font: menu would be equivalent to:

font: 600 12px Times;

Copy the code

Because the style of the system font can only be inherited as a whole, not individually, the style of the system font can only be inherited through the font shorthand property. In addition, since the font shorthand property resets all values not explicitly given to the corresponding initial value, the above declaration is equivalent to:

font-family: Times;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 12px;
line-height: normal;

Copy the code

CSS Fonts Module Level 3

As we know, since CSS3, the CSS specification has been broken down into modules and updated separately, and new requirements will be approved and standardized as a new module. After CSS 2.1, Fonts in CSS are separated into the CSS3 Fonts module. In order to support downloadable custom Fonts, the CSS3 Web Fonts module was created.

But eventually, CSS3 Fonts and CSS3 Web Fonts were merged into CSS Fonts Module Level 3 (hereinafter referred to as “ML3”). Later, the content related to Font Loading in ML3 was separately referred to as CSS Font Loading Module Level 3.

ML3 further refines the connotation and extension of CSS font attributes. For example, for font names that appear in the font family list. ML3 further explains:

Font name specifies only the name of a font, but not a font within that font. For example, Futura is a font that includes the Futura Medium, Futura Medium Italic, Futura Condensed Medium, and Futura Condensed ExtraBold fonts.

ML3 also adds the Font-stretch property, which is used to select normal, tight, or loose glyphs from fonts, with the following keyword values:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

In addition, oblique can be enabled with the font-synthesis attribute for the keyword that was previously called “pseudo-italic” in the font-style attribute. For some scripts, like Cyrillic, real italics are very different from synthetic italics. For example, the following rule forbids UA from composing Arabic italics:

*:lang(ar) { font-synthesis: none; }

Copy the code

ML3 also adds the font-size-adjust attribute to maintain the aspect ratio (the relative height of lowercase letters to uppercase letters) of the intended font for readability when using an alternate font.

@font-face

As mentioned earlier, the biggest change in ML3 is the addition of the Font Resource section. This section defines the @font-face rule, which is used to define a new font whose attributes are determined by the rule descriptor declaration enclosed in curly braces. Font-family and SRC are required descriptors. (Note that in normal CSS declarations, font-family and SRC are properties, while in the @font-face rule, because they are used to define a new font, font-family and SRC are descriptors, properties that describe the new font.)

The font-family descriptor defines the font name, overwriting the name in the underlying font file, and overwriting the system font if the name conflicts with the system font.

The SRC descriptor defines the font’s source, and its value is a prioritized list of sources, imported locally using local() and imported externally using URL (). When importing external fonts using URL (), you can use format() to add hints for font formatting. The valid font format strings defined by ML3 are:

In addition, since OpenType is a TrueType superset and extension, the string “TrueType” and “OpenType” represent the same meaning.

/* Try to load WOFF2 font, then WOFF, otherwise OpenType */ @font-face {font-family: bodytext; src: url(ideal-sans-serif.woff2) format("woff2"), url(good-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("opentype"); }Copy the code

When loading a local font using local(), because UA matches the full name contained in the font file, and the full name of the same font may be different on different platforms, you need to specify all possible names for cross-platform use.

Background-position: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial; background-repeat: initial; SRC: local(Gentium Bold), /* full name */ local(gentitium-bold), /* Postscript name */ url(gentiumbold.woff); / / font weight: bold; }Copy the code

The local() function is useful, as the example above actually creates a uniform alias for the same font on different platforms. Another example is to extract a font from a large font that will never be referenced:

@font-face { font-family: Hoefler Text Ornaments; /* With HoeflerText Regular */ SRC: local(HoeflerText-Ornaments); }Copy the code

In addition, ML3 states that the UA can preferentially use only the Full English name in the font file to match fonts. Even if the user’s operating system sets the locale as Germany or Finland, and the font file also contains the full German and Finnish font names, the full English names should be matched for the sake of platform-wide unification. So h2 will end up using the default serif font:

@font-face { font-family: SectionHeader; src: local("Arial Lihavoitu"); /* Arial Bold */ font-weight: Bold; } h2 { font-family: SectionHeader, serif; }Copy the code

Finally, if there are more than one SRC descriptor, the last one declared overwrites the first one:

@font-face { font-family: MainText; src: url(gentium.eot); /* For old UA */ SRC: local("Gentium"), url(Gentium. /* overwrite the preceding */}Copy the code

The values of the font-style, font-weight, and font-stretch descriptors are the same as those of the corresponding properties, except that the relative keywords bolder and lighter are not allowed.

To sum up, the introduction of the @font-face rule provides great convenience for the use of CSS fonts. In fact, the @font-face rule works to its fullest potential only when combined with the unicode-range descriptor that will soon be introduced.

unicode-range

The Unicode-range descriptor is used to specify the Unicode code point supported by the currently defined font. It is a comma-separated Unicode range value. This defines a character set that the UA can use to decide whether a new font needs to be downloaded for a particular character.

Unicode range values support single code points (e.g. U+416), code point ranges (e.g. U+ 400-4FF), and wildcard ranges (e.g. U+4??). .

So what is a Unicdoe range or character range (character set) for? You can define a compound font with multiple @font-face rules and different Unicode ranges. In other words, you can include different glyphs of multiple fonts from different languages in a custom font, or you can define a new font that contains only common or rare characters of a particular font. If multiple @font-face rules for the same new font have overlapping Unicode ranges, the last rule defined matches first.

The following rules define a new font JapaneseWithGentium based on the Japanese MSMincho font and the English Gentium font, where the Latin font comes from Gentium font and the other font comes from MSMincho.

@font-face { font-family: JapaneseWithGentium; src: local(MSMincho); Background-color: RGB (255,255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); src: url(.. /fonts/Gentium.woff); unicode-range: U+0-2FF; /* The rule defined last matches first */}Copy the code

Fonts can also be “downloaded on demand” using @font-face’s cascading rules. For example, in the example below, UA will only download Droidsans.woff if it only needs the glyph of Latin characters.

Background-color: RGB (255,255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); src: url(DroidSansFallback.woff); } /* Japanese font: 1.2MB */ @font-face {font-family: DroidSans; src: url(DroidSansJapanese.woff); unicode-range: U+3000-9FFF, U+ff?? ; } /* Latin, Greek, cyrilic and punctuation: 190KB */ @font-face {font-font-family: DroidSans; src: url(DroidSans.woff); unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; }Copy the code

ML3 specifies that font resources specified by @font-face are lazy-loaded, that is, if they are not used, they will not be downloaded. There are many @font-face definitions in the stylesheet, but the UA must only download fonts that are referenced in the style rules. The exception to this rule is when a custom font is used as a backup font, the UA can be downloaded in advance, for example:

@font-face {/* custom font */ font-family: GeometricModern; src: url(font.woff); } p {/* download only when applied to p elements */ font-family: GeometricModern, sans-serif; } h2 {/* If there is a local Futura, it will download */ font-family: Futura, GeometricModern, sans-serif; }Copy the code

In general, pages load before fonts. How should text with a custom font be displayed at this point? ML3 states that UA can render fonts in cases where custom fonts are not available, or render text transparent with backup fonts. But after a custom font download fails, the UA must display the text. Therefore, ML3 also requires the stylesheet author to specify a backup font that is similar in size to the custom font.

For font retrieval, ML3 specifies that you must use CORS enabled means, using Anonymous mode, setting the referrer to the URL of the stylesheet and origin to the URL of the document containing the stylesheet.

ML3 is the most detailed font matching ever. It adds font-stretch matching, which lists all possible font-style matches. Small-caps is completely removed from the font matching process and handled by font features. Unicode variant selectors are required. The cluster sequence matches as a unit.

The font characteristics

As mentioned earlier, the Font-variant property has always had only one small-caps variant. The font used in practice is much more than just a variation on small capital letters. For this reason, ML3 extends the Font-variant property to a shorthand property that controls all style-related font features.

In other words, Font – Variant contained both font-variant-ligatures, font-variant-postion, font-variant- CAPS, font-variant-numeric, font-variant- east-Asian And other specific attributes.

Font features can be enabled by font-variant or font-feature-Settings. The details can be learned by interested readers because of the many ancient traditions involved in English fonts.

The end of the

CSS Font Module Level 3 became a W3C recommendation in September 2018, followed by CSS Fonts Module Level 4, which includes some experimental features related to CSS Fonts. In addition, CSS Font Loading Module Level 3, which is separate from CSS Font Module Level 3, is already supported by newer versions of major browsers.

A link to the

• Cascading Style Sheets, Level 1 (www.w3.org/TR/REC-CSS1…)
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) (www.w3.org/TR/2011/REC…)
• CSS Font Module Level 3 (drafts.csswg.org/css-fonts-3…)
• CSS Fonts Module Level 4 (drafts.csswg.org/css-fonts-4…)
• CSS Font Loading Module Level 3 (drafts.csswg.org/css-font-lo…)
• Character Model for the World Wide Web 1.0: Fundamentals: (www.w3.org/TR/2005/REC…)