Системные шрифты в CSS

Около трех лет назад Крейг Хокенберри (Craig Hockenberry) написал статью о том, как получить системные шрифты в CSS. Шрифты San Francisco только что были выпущены, и разместить их на веб-странице было нелегко. Недавний твит напомнил ему, что нужно обновить эту информацию.

В своем исходном посте Крейг Хокенберри предложил идею универсального системного шрифта:

В настоящее время не существует универсального «системного» имени семейства, но я бы посоветовал производителям браузеров принять этот метод.

Apple согласилась и сделала предложение в списке рассылки CSS. В течение следующих нескольких месяцев это предложение превратилось из «системного» в «системный интерфейс». (Когда-то Windows использовала шрифт под названием «System», который мог вызвать конфликт.)

В конце концов модуль шрифтов CSS был обновлен, и появился официальный способ рендеринга текста, как в операционной системе.

Как известно каждому веб-разработчику, добавить функцию в спецификацию — это одно, а добавить ее в браузер — совсем другое. К счастью, принятие system-ui было быстрым. И Chrome, и Safari полностью поддерживают его на самых разных платформах. Отстают только Mozilla и Windows.

Во многих случаях вам также придется принимать во внимание обратную совместимость — не у каждого посетителя есть самый последний и самый лучший браузер. Этот CSS должен охватывать все основы:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;

Для получения дополнительной информации о том, что означают эти названия шрифтов, см. статью Marcin Wicharys в журнале Smashing Magazine.

Craig Hockenberry было интересно наблюдать за всем этим процессом. То, что началось как простая идея, в итоге было обсуждено и реализовано десятками талантливых инженеров. В результате сеть стала лучше и проще для многих людей.

Ист. System Fonts in CSS