1. Дальнейшее чтение на SmashingMag:
2. Два подхода к системным шрифтам
3. Подход А
4. Подход Б
5. Другие подходы
6. Что делать сегодня?
7. Детали подхода Б
8. Будущее
9. Дальнейшее чтение

Возможно, впервые с момента появления Macintosh, мы можем порадоваться использованию системных шрифтов пользовательского интерфейса. Это интересная, свежая альтернатива веб-типографике , которая не требует службы доставки веб-шрифтов или файлов шрифтов, хранящихся на вашем сервере. Как мы используем системные шрифты пользовательского интерфейса на веб-сайте, и каковы предостережения? Системные пользовательские интерфейсы были просто удивительными. Google с большим успехом трудился над Roboto (включая регулярные обновления), Apple произвела сенсацию в Сан-Франциско, и Mozilla попросила известного дизайнера шрифтов Эрика Шпикерманна создать Fira Sans.

Возможно, впервые с момента появления Macintosh, мы можем порадоваться использованию системных шрифтов пользовательского интерфейса. Это интересная, свежая альтернатива веб-типографике , которая не требует службы доставки веб-шрифтов или файлов шрифтов, хранящихся на вашем сервере. Как мы используем системные шрифты пользовательского интерфейса на веб-сайте, и каковы предостережения?

Системные пользовательские интерфейсы были просто удивительными. Google трудится над Roboto с большим успехом (в том числе регулярные обновления ), Apple сделала всплеск с Сан-Франциско и Mozilla попросили известного шрифтовика Эрика Шпикерманна создать Fira Sans , Не в последнюю очередь, давайте не будем забывать о Microsoft. Именно Microsoft возобновила разговоры о системных шрифтах пользовательского интерфейса с помощью своего оригинального языка разработки Windows Phone (ранее Metro), который в значительной степени опирался на типографику в целом и на шрифт с именем Segoe особенно.

Шрифты системного интерфейса последнего поколения и их привязанность. ( Посмотреть большую версию )

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

Дальнейшее чтение на SmashingMag:

Но это не так просто, как могло бы быть. Это потому, что поддержка CSS, как ни странно, шизофренична .

(Примечание по номенклатуре: я использую здесь «системный шрифт пользовательского интерфейса» для обозначения шрифта, в котором отображается пользовательский интерфейс операционной системы - в отличие от «системного шрифта», традиционного имени для любого локального или платформенного шрифта, который уже используется присутствует в системе пользователя, и его не нужно включать в полезную нагрузку веб-сайта.)

Два подхода к системным шрифтам

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

Подход А

Подход А заключается в использовании «магического» сокращенного свойства CSS:

шрифт: меню;

некоторые из этих стенографических свойств существовали в течение самого длительного времени (заголовок, значок, меню, окно сообщения, маленький заголовок, строка состояния), но я никогда не видел, чтобы они широко использовались.

Подход А имеет свои недостатки:

• Он не возвращает правильный шрифт ни на iOS , ни во многих браузерах Android.
• Это сокращение, которое означает, что он переопределяет размер шрифта (хотя его можно сбросить), и его нельзя комбинировать и не отступать ни к чему другому.
• До декабря 2015 года в Firefox на Mac OS X он не использовал «умные» свойства Сан-Франциско (который автоматически переключается с текста Сан-Франциско на дисплей Сан-Франциско для текста размером более 20 пикселей и регулирует межбуквенный интервал).

Системные шрифты пользовательского интерфейса Mac OS X на протяжении веков: от Чикаго в 1984 году, через Charcoal и Lucida Grande до Сан-Франциско на дисплее высокого разрешения в 2015 году. ( Посмотреть большую версию )

Подход Б

Подход B состоит в том, чтобы перечислить шрифты по имени:

семейство шрифтов: -apple-system, BlinkMacSystemFont, «Segoe UI», «Roboto», «Oxygen», «Ubuntu», «Cantarell», «Fira Sans», «Droid Sans», «Helvetica Neue», без засечек ;

Это тоже имеет свои недостатки:

• Вы должны будете поддерживать список (и его порядок). Возможно, системные шрифты пользовательского интерфейса будут меняться не так часто, как в последние несколько лет, но в любом случае это не будущее.
• Список нацелен на самые популярные браузеры и операционные системы, но не на все .
• Это еще не работает в Firefox на Mac OS X El Capitan, в результате чего показывается Neue Helvetica, а не Сан-Франциско. (Это должно быть исправлено в декабре 2015 года.)
• Это решение склонно к конфликтам имен, что привело к очень интересным ошибка с системным шрифтом на Medium , Также, например, кислород ( Шрифт пользовательского интерфейса KDE ) это имя другой шрифт что люди могут установить, что может привести к сюрпризы , Кроме того, если вы разработчик и случайно установили Roboto или Fira Sans на свой компьютер, тогда в этом объявлении шрифта может использоваться один из них вместо действительного шрифта пользовательского интерфейса системы.
• Mac OS 10.0 до 10.9 использует Lucida Grande в качестве шрифта пользовательского интерфейса системы. Mac OS 10.10 использует Neue Helvetica. Однако во всех версиях Mac OS X установлены оба этих шрифта. Поскольку объявление font-family работает путем последовательного просмотра списка шрифтов, чтобы найти первый установленный, выбрать Lucida Grande на некоторых платформах и Neue Helvetica на других невозможно. Первый доступный из перечисленных в декларации всегда будет выбран.

Другие подходы

Вы можете быть склонны комбинировать подход A с подходом B, чтобы получить лучшее из обоих миров. К сожалению, это нелегко, потому что свойства font и font-family взаимоисключающие - одно просто переопределит другое. Возможно, медиа-запросы могут прийти на помощь, но это глупо.

Вы можете также представить отправку различных значений CSS с сервера, в зависимости от агента пользователя (например, отправка только шрифтового семейства: «Fira Sans», sans-serif; если мы знаем, что браузер работает под управлением Firefox OS), или выполнение это через JavaScript. Но это кажется громоздким и трудным для поддержания, и это все еще не решает все наши проблемы.

Вы можете использовать системный интерфейсный шрифт только для пользовательского интерфейса (слева, Средняя ) или для всего сайта (справа, Коул Питерс ). Обратите внимание, что многие системные шрифты пользовательского интерфейса не оптимизированы для более длинного контента. ( Посмотреть большую версию )

Что делать сегодня?

Я работаю в Medium, и в настоящее время мы используем подход B:

семейство шрифтов: -apple-system, BlinkMacSystemFont, «Segoe UI», «Roboto», «Oxygen», «Ubuntu», «Cantarell», «Fira Sans», «Droid Sans», «Helvetica Neue», без засечек ;

Мы выбрали этот подход, потому что он, кажется, имеет меньше серьезных проблем. (Подход A терпит неудачу в мобильных браузерах способами, которые являются неприемлемыми. Подход B тоже сбой, но реже и с меньшими последствиями. Ваш пробег может отличаться.)

Вы и я можем сделать это еще лучше вместе. Поле ниже использует объявление выше и должно отображаться шрифтом UI вашей системы. Если это не так или если у вас есть какие-либо мысли, пожалуйста, оставьте комментарий!

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

Детали подхода Б

Если вас интересуют подробности, давайте разберемся, как этот список выглядит так:

font-family: / * 1 / -apple-system, BlinkMacSystemFont, / 2 / «Segoe UI», «Roboto», «Oxygen», «Ubuntu», «Cantarell», «Fira Sans», «Droid Sans», / 3 * / «Helvetica Neue», без засечек;

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

• -apple-system нацелена на Сан-Франциско в Safari на Mac OS X и iOS, а также на Neue Helvetica и Lucida Grande на более старых версиях Mac OS X. Она правильно выбирает между Сан-Франциско Текст и Сан-Франциско Дисплей в зависимости от размера текста.
• BlinkMacSystemFont является эквивалентом Chrome в Mac OS X.

Вторая группа предназначена для известных системных шрифтов пользовательского интерфейса:

• Пользовательский интерфейс Segoe предназначен для Windows и Windows Phone.
• Roboto ориентирован на Android и более новую Chrome OS '. Он намеренно указан после пользовательского интерфейса Segoe, поэтому если вы являетесь разработчиком Android под Windows и у вас установлен Roboto, вместо него будет использоваться пользовательский интерфейс Segoe.
• Кислород нацелен на KDE, на Ubuntu ... ну, вы можете догадаться, а Cantarell на GNOME. Это начинает бесполезно, потому что в некоторых дистрибутивах Linux есть много таких шрифтов.
• Fira Sans предназначается для Firefox OS.
• Droid Sans предназначен для более старых версий Android.
• Обратите внимание, что мы не указываем Сан-Франциско по имени. Как на iOS, так и на Mac OS X Сан-Франциско явно не доступен, а скорее существует как «скрытый» шрифт.
• Мы также не указываем Сан-Франциско, используя .SFNSText-Regular, внутреннее имя PostScript для Сан-Франциско в Mac OS X. Он работает только в Chrome и менее универсален, чем BlinkMacSystemFont.

Третья группа - это наши резервные шрифты:

• Helvetica Neue предназначена для версий Mac OS X до El Capitan. Она указана близко к концу, потому что это популярный шрифт на других компьютерах не El Capitan.
• sans-serif является резервным шрифтом sans-serif по умолчанию.

Эволюция системного шрифта пользовательского интерфейса Windows еще более резкая, чем у Mac OS X - от моноширинных растровых шрифтов в Windows 1.0 в 1985 году до пользовательского интерфейса высокого разрешения Segoe в Windows 10. ( Посмотреть большую версию )

Вот известные на данный момент проблемы с этим подходом:

• В Firefox на Mac OS X в Сан-Франциско расстояние между буквами меньше, чем в Safari и Chrome.
• Он не отображает Lucida Grande в доосемитских версиях Mac OS X, возвращаясь к Neue Helvetica. И он может не соответствовать правильному шрифту в менее популярных операционных системах или более сложных конфигурациях.

Будущее

Еще есть над чем поработать. Все, что мы рассмотрели, работает только для западной типографии. Кроме того, если вы хотите настроить отступы или высоту строки в соответствии со шрифтом пользовательского интерфейса, который используется на вашем веб-сайте, то вам придется использовать гибридный подход, описанный выше, либо определить шрифт после рендеринга ,

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

В последних трех версиях Mac OS X используются три различных системных шрифта пользовательского интерфейса: Lucida Grande в Mac OS 10.9 (Mavericks); специальная версия Neue Helvetica на Mac OS 10.10 (Yosemite); и специальная версия Сан-Франциско на Mac OS 10.11 (El Capitan). Можно с уверенностью предположить, что будущие версии будут продолжать использовать Сан-Франциско. ( Посмотреть большую версию )

Дальнейшее чтение

Благодарю Джона Даггетта, Майкла Даггана, Кеннета Орманди и Эмиля Эклунда за помощь в этой статье.

Похожие

Комментарии