Java, UX, HTML, CSS, WEB-design

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

[ad_1]

  • Марчин Вихари

  • 0 Комментарии

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

  • 8 минут чтения

  • Типографика, шрифты, CSS

Краткое резюме ↬

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

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

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

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

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

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

  • Инструменты и ресурсы для более значимой веб-типографики
  • Руководство по стекам шрифтов CSS: методы и ресурсы
  • Пробелы в Unicode и HTML
  • Балансировка длины строки и размера шрифта в RWD

Еще после прыжка! Продолжить чтение ниже ↓

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

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

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

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

Подход А

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

font: menu;

Некоторые из этих сокращенных свойств существовали в течение самого долгого времени (caption, icon, menu, message-box, small-caption, status-bar), но я никогда не видел, чтобы они широко использовались.

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

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

Подход Б

Подход B заключается в перечислении шрифтов по имени:

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

В этом тоже есть свои минусы:

  • Вы должны будете вести список (и его порядок). Возможно, системные шрифты пользовательского интерфейса не будут меняться так часто, как в последние несколько лет, но в любом случае это не гарантия будущего.
  • Список нацелен на самые популярные браузеры и операционные системы, но он не нацелен на все из них.
  • Он еще не работает в Firefox на Mac OS X El Capitan, в результате чего отображается Neue Helvetica, а не Сан-Франциско. (Это должно быть исправлено в декабре 2015 года.)
  • Это решение склонно к конфликтам имен, что привело к очень интересной ошибке с системным шрифтом на Medium. Кроме того, например, Oxygen (шрифт пользовательского интерфейса 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 на других невозможен. Всегда будет выбран первый доступный из списка в объявлении.

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

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

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

Вы можете использовать системный шрифт пользовательского интерфейса только для пользовательского интерфейса (слева, medium.com) или для всего веб-сайта (справа, colepeters.com).  Обратите внимание, однако, что многие системные шрифты пользовательского интерфейса не оптимизированы для более длинного контента.
Вы можете использовать системный шрифт пользовательского интерфейса только для пользовательского интерфейса (слева, Medium) или для всего веб-сайта (справа, Cole Peters). Обратите внимание, однако, что многие системные шрифты пользовательского интерфейса не оптимизированы для более длинного контента. (Посмотреть большую версию)

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

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

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

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

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

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

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

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

font-family:
/* 1 / -apple-system, BlinkMacSystemFont,
/ 2 / “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”,
/ 3 */ “Helvetica Neue”, sans-serif;

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

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

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

  • Segoe UI нацелены на Windows и Windows Phone.
  • Roboto предназначен для Android и более новых версий Chrome OS. Он намеренно указан после пользовательского интерфейса Segoe, поэтому, если вы являетесь разработчиком Android для Windows и у вас установлен Roboto, вместо него будет использоваться пользовательский интерфейс Segoe.
  • Oxygen нацелен на KDE, Ubuntu цели… ну, вы можете догадаться, и Cantarell нацелен на GNOME. Это начинает казаться бесполезным, потому что в некоторых дистрибутивах Linux есть много таких шрифтов.
  • Fira Sans нацелен на ОС Firefox.
  • 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 является запасным шрифтом без засечек по умолчанию.
Эволюция системного шрифта пользовательского интерфейса Windows еще более радикальна, чем в Mac OS X — от моноширинных растровых шрифтов в Windows 1.0 в 1985 году до пользовательского интерфейса Segoe с высоким разрешением в Windows 10.
Эволюция системного шрифта пользовательского интерфейса Windows еще более радикальна, чем в Mac OS X — от моноширинных растровых шрифтов в Windows 1.0 в 1985 году до пользовательского интерфейса Segoe с высоким разрешением в Windows 10. (Просмотреть большую версию)

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

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

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

  • «Я оставил системные шрифты в Сан-Франциско», — Крейг Хокенберри.
  • System Shock: история 25-летнего шрифта, который возрождается с новой силой», Марчин Вичари, Medium

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

Сокрушительная редакция
(вф, ал)



[ad_2]
Source: https://smashingmagazine.com

Заключение

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

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

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

Название: Использование системных шрифтов пользовательского интерфейса в веб-дизайне: краткое практическое руководство . Краткое описание: [ad_1] ⭐ Марчин . Дата публикации: 06.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»