/ 

Используем системный шрифт San Franciso на Mac OS

Вместе с выпуском Apple Watch, компания представила новый шрифт San Francisco, который теперь будет использоваться во всей экосистеме Apple. Уже сейчас можно посмотреть на этот шрифт в публичных бетах OSX и El Capitan.

Какзалось бы, что теперь при просмотре стандартной веб странички, на устройствах Apple будет установлен этот шрифт. Но это не так. Более того, нам даже не поможет следующий код:

body {
  font-family: "San Francisco", "Helvetica Neue", "Lucida Grande";
}

К сожалению, в свежих версиях El Capitan шрифт San Francisco не установлен. Однако это же системный шрифт, как такое возможно?

Ищем шрифт San Francisco в El Capitan
Ищем шрифт San Francisco в El Capitan

Apple сделал свой новый шрифт приватным в системе, но это не значит что мы не можем до него добраться 😉

Подключаем San Francisco

Чтобы добраться до системного шрифта, в некоторых браузерах есть значение шрифта -apple-system. В будущем можно будет пользоваться только им, но не сейчас. Чтобы все работало в хроме и остальных браузерах на нужен следующий код:

body {
  font-family: system, -apple-system, BlinkMacSystemFont, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande";
}

“.SFNSDisplay-Regular” это приватное имя для San Francisco (regular) в текущих бета релизах (это может поменяться в любое время!).

Значение свойства “system” для семейства шрифта сейчас не существует, но возможно в ближайшем будущем, разработчики браузеров добавят его. Думаю это было бы полезно для всех платформ. На андройде Roboto или Noto. Для windows пользователь может сам выбирать шрифт, а мы, пока, не можем знать какой шрифт у него стоит по умолчанию.

Хотя меня не очень радует перспектива использовать шрифт Roboto или какой-то другой, отличный от яблочных. Поэтому я бы убрал system.

Если у вас есть El Capitan или iOS 9, вы можете посмотреть на мой блог, на котором уже стоит San Francisco. Так-же я подготовил небольшую демонстрацию.

Подсмотрено у Craig Hockenberry.

Обновление от 6 февраля, 2016.
Хром теперь поддерживает свое значение BlinkMacSystemFont, аналогичное -apple-system.

⌘ ⌘ ⌘
Поделиться
Отправить
Вопросы и ответы на собеседовании разработчика интерфейсов #1
Фронтенд

Вопросы и ответы на собеседовании разработчика интерфейсов #1

Серия статей, в которой я буду разбирать популярные вопросы на собеседовании разработчиков интерфейсов и front end разработчиков, связанные с JavaScript и версткой.

Полезная привычка #1: Проверяй код перед комитом
Фронтенд

Полезная привычка #1: Проверяй код перед комитом

Первая статья из серии полезных привычек разработчиков и программистов: Проверяй свой код перед комитом.

Гайд по стилю кода на JavaScript от AirBnB
Фронтенд

Гайд по стилю кода на JavaScript от AirBnB

Общие рекомендации по стилю написания кода от Airbnb. Влючая сравнения производительности и лучшие практики.

Разбираемся со сборкой front end на Gulp
Фронтенд

Разбираемся со сборкой front end на Gulp

Обзор основных возможностей новой системы для сборки проектов — Gulp, а так-же с изучаем как работают его основные функциии.