CSS fonts trivia

By Chen Hui Jing / @hj_chen

Font formats for web use

WOFF2 (Web Open Font Format 2)
WOFF (Web Open Font Format)
OTF (OpenType)
TTF (TrueType)
EOT (Embedded Open Type)
SVG (Scalable Vector Graphics)

@font-face rule

@font-face {
    font-family: 'Magnetic Pro';
    src: url('../fonts/magnetic-pro-light.woff2') format('woff2'),
         url('../fonts/magnetic-pro-light.woff') format('woff');

Can I Use woff? Data on support for the woff feature across the major browsers from caniuse.com.

Can I Use woff2? Data on support for the woff2 feature across the major browsers from caniuse.com.

Picks font Matches criteria? No Next alternative ‘font-family’ Yes

Declare your Latin fonts first

font-family: 'Gentium Basic', 'PingFang TC', 'Microsoft JhengHei', '微軟正黑體', 'Heiti TC', '黑體-繁', sans-serif;

Font rendering for Mac and Windows is different, and sometimes the Latin characters in Chinese fonts don't look good on Windows.

Put your font names in quotes. Just in case.

Generic font families

Dependent on OS, HTML language, character set and browser.

serif Times New Roman, SimSun, SongTi SC
sans-serif Arial, Microsoft Yahei, PingFang SC
monospace Consolas, SimSun, PingFang SC
cursive Comic Sans MS, Apple Chancery, SimSun (oblique), SongTi SC (oblique)
fantasy Gabriola, Impact, Papyrus, Microsoft Yahei, PingFang SC

Level 4 is adding system-ui, emoji, math and fangsong

Basic font properties

font-weight Specifies the weight of the glyphs in the font. Can use keywords or numerical values.
font-stretch Selects a normal, condensed or expanded face from a font family. Range spans over 9 keywords.
font-style Allows italic or oblique faces to be selected.
font-size Indicates the desired height of the glyphs. Takes absolute or relative values.
font-size-adjust Adjusts the font-size to preserve the x-height of the first choice font.
font-synthesis Controls whether user agents are allowed to synthesize bold or oblique font faces when missing.

Using non-system fonts

The @font-face rule allows us to link to fonts, either locally or external, which are fetched and activated when needed.

We can use multiple @font-face rules to construct font families.

A rule consists of the @font-face keyword followed by a block of font descriptors.

Anatomy of an @font-face rule

@font-face {
    font-family: <family-name>
    src: [ <url> [format(<string> #)]? | <font-face-name> ] #
    font-style: normal | italic | oblique 
    font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
    font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
    unicode-range: <urange> # 
    font-variant: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] 
    font-feature-settings: normal | <feature-tag-value> # 

Краткая история создания Тетриса

Алексей Пажитнов написал первый Тетрис на компьютере Электроника-60. Он работал в ВЦ Академии наук, где изучал вопросы распознавания речи и искусственного интеллекта. Для обкатки своих идей Пажитном использовал головоломки, включая и пентамино. Он попытался сделать автоматической укладку в заданные фигуры пентамино, но не хватило мощности того оборудования для его вращения. Пришлось отлаживать на тетрамино, так и родилось название игры. Те опыты Алексея и родили главную идею Тетриса – падение фигурок и исчезновение заполненных рядов.

@font-face {
  font-family: 'Magnetic Pro';
  src: url('magnetic-pro-light.woff2') format('woff2'),
       url('magnetic-pro-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;

@font-face {
  font-family: 'Magnetic Pro';
  src: url('bender.woff2') format('woff2'),
       url('bender.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0400-U+04FF;

Font feature properties (1/2)

font-kerning font-variant-position font-variant-position-ligatures
font-variant-numeric font-variant-caps font-variant-alternates

Font feature properties (2/2)

font-variant-east-asian font-language-override font-feature-settings

Provides low-level control of advanced OpenType features