Руководитель проектов
0,0
рейтинг
7 октября 2015 в 11:42

Разработка → Перевод. Я оставил свои системные шрифты в Сан Франциско из песочницы

Свет увидели и новая версия iOS 9, и OS X 10.11 El Capitan, и даже watchOS 2. И всех их объединяет новый шрифт — San Francisco. И как молодого веб разработчика, меня заинтересовала возможность использовать данный шрифт для веб сайтов. Так родился этот перевод статьи «I Left My System Fonts In San Francisco».

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

Что ж, скоро мы все будем сталкиваться с контентом, отображаемым в San Francisco, и нам понадобится как-то указать этот самый шрифт в нашем CSS.

По традиции мы можем попробовать указать шрифт San Francisco явно, что-нибудь в этом стиле:

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

К сожалению, в свежеустановленной OS X 10.11 (El Capitan) нет этого шрифта.



Но как это возможно, ведь это же системный шрифт?

Apple решили абстрагироваться от понятия «системный шрифт» и они не присвоили ему явного имени. Так же, они сообщили, что любые скрытые личные имена шрифта могут меняться. Все такие имена будут начинаться с точки, например, ультра тонкий шрифт San назван как «.SFNSDisplay-Ultralight».

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

Разметка выглядит так:

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

К еще большему сожалению, она плохо документирована. Большую часть информации об этом имени я получил из WebKit source code. И она оставляется ощущение, что работа еще не завершена.

Второе разочарование в том, что это общее наименование работает только в Safari. Конечно же глупо ждать подобной поддержки префикса «-apple» от Хрома, когда он базируется на форке WebKit’а. В добавок к этому, в Safari под iOS добавлены разные стили системного шрифта, которые вписываются к концепцию «Динамического переключения шрифтов». И эти кейворды стилей могут быть использованы начиная с iOS 7 и дальше:
-apple-system-headline1
-apple-system-headline2
-apple-system-body
-apple-system-subheadline1
-apple-system-subheadline2
-apple-system-footnote
-apple-system-caption1
-apple-system-caption2
-apple-system-short-headline1
-apple-system-short-headline2
-apple-system-short-body
-apple-system-short-subheadline1
-apple-system-short-subheadline2
-apple-system-short-footnote
-apple-system-short-caption1
-apple-system-tall-body

Так как OS X не может подстраиваться динамически, они совершенно бесполезны для десктопов. И конечно же, не может быть и речи о поддержке со стороны Хрома.

Так же учтите, что кейворды не будут работать со значением font-family, они только работают со значением font.
Если же вы дизайнер или разработчик под устройства Apple, то вы, скорее всего, поставили шрифт San Francisco вручную. Не обманывайте себя. Большенство людей которые будут посещать ваш сайт, не будут имень этих шрифтов у себя. А еще, перед скачиванием, вы принимаете лицензию о не распространении шрифта, что не позволяет его использовать как веб-шрифт.

Так как же быть кодеру?

Если вы знаете, что ваш контент будет появляться только в Apple браузере, разметка достаточно проста:

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

Если же хочется учесть Chrome и другие браузеры, то:

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

«.SFNSDisplay-Regular» — это скрытое личное имя шрифта для обычного стиля San Francisco. Помните, что эти обозначения могут быть изменены в любом апдейте!

А вот такого семейства как «system» пока не существует. Но я призываю всех разработчиков браузеров унаследовать такую технику. Это поможет разработчикам на всех платформах. На Андройде будет по умолчанию использоваться Roboto или Noto. А для таких систем как Windows, где пользователи сами могут выбирать системный шрифт, автоматический выбор позволит адаптировать контент еще проще.

Вот пара скриншотов с демонстрацией для тех, кто еще не поставил себе El Capitan.

Safari:



Chrome:



Ссылка проверить самому.

Фиолетовая строка демонстрирует верное отображение шрифта в обоих браузерах используя «гибридный хак», описанный выше.

Так же есть информация из блога Safari, что они работают вместе с W3C для стандартизации font-family: system

Буду рад если эта информация хоть кому-то пригодится.
Роман Коломыченко @olmerlv
карма
7,0
рейтинг 0,0
Руководитель проектов
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (32)

  • +5
    Я не понял, если там такие вилы, какая нужда заморачиваться на этот санфранциско?

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

    На данный момент в своих проектах лучше использовать какую-нибудь адекватную гарнитуру с парой десятков начертаний.
    • +1
      Если использовать «системную» гарнитуру, надо сразу быть готовым к тому, что размеры и пропорции могут быть разными.
  • +3
    Может я ошибаюсь, но разве если написать sans-serif в font-family, разве мак ос не подставит сан-франциско? (сразу свангую — подставит, если в браузере не переопределены). Более того, это работает везде и всегда будет тянуть системный шрифт (если он не переопределен в браузере), тогда зачем нужен system?
    • +1
      Автору статьи тоже сделали такое замечание. Он тестировал это правило во всех браузерах и они отдавали ему шрифт Helvetica, даже не Helvetica Neue. Отсюда и такие пляски с бубном.
      • +2
        Странное решение от Apple в таком случае. Думаю, либо из-за попытки сохранять совместимость со старыми сайтами, либо поправят в OS X 10.12. Пора бы уже. Тем не менее, я вот сейчас сижу с El Capitan, и разницы в шрифте между браузером (страницей хабра с sans-serif) и системным на глаз не вижу совершенно. Разве что двоеточие не поднимается (13:23). Разница слишком мелкая, чтобы её замечали кто-то кроме трех дизайнеров с орлиным глазом, как по мне.
  • +7
    >На Андройде будет
    Где?
    • –7
      да какая разница? все вокруг пишут «эйпл», «плейер» и так далее, а обращают внимание только на «андройд».
      • +11
        Не обобщайте. Я на всё внимание обращаю.
        • 0
          Я ещё на вещи навроде
          в Apple браузере
          обращаю. Везде замечаю, паранойю, спать из-за дефицита дефисов не могу :) Дошёл таки до того, что на gramota.ru о смешивании русского и английского в рамках составного слова спросил, ещё в пятницу, но ответа до сих пор не получил — либо обращение не дошло, либо они сами в недоумении и подробно изучают вопрос. Хотя тема, в общем, не нова.
          • 0
            Вы порядок слов перепутали. Есть браузер [от] Apple, нет Apple[-]браузера.
            • 0
              порядок слов
              О языке русском говорим ли мы? :-)

              В данном случае не особо лепится, да, но вообще такой мешаноязычной терминологии много, особенно в IT. И многие слова (например, SMS-сообщение) уже закреплены в словарях. А вот правил по этому поводу я так и не обнаружил.
              • 0
                Правила скорее всего самые обычные — по частям речи и роли в предложении. Т.е. чей браузер? — Apple, сообщение какое? SMS (вспоминаем перевод и читаем как «текстовое»). По уму саму аббревиатуру нужно выпиливать отовсюду кроме технической документации.
                Ну и далеко не везде нужны дефисы — составных слов и про слитное написание забывать не стоит.
                • 0
                  вспоминаем перевод
                  Перевод — Сервис Коротких Сообщений. Давайте секасами обмениваться, чтобы без буржуйских ка́лек, чего уж там. Ну или электронными телеграммами это можно было назвать, по аналогии с электронной почтой — но теперь поздно. Эсэмэски — они и в Африке эсэмэски, в самом что ни на есть прямом смысле.
                  составных слов
                  Так их как раз в случае сочетания характеристики и объекта положено через дефис писать. Иначе не только разноязычные сочетания придётся выкинуть, но и всяких контр-адмиралов, пресс-папье, шеф-поваров и т. д. Кстати, как того же шеф-повара «развернуть»?
                  слитное написание
                  А вот тут примеры в студию.
                  • 0
                    Давайте секасами обмениваться

                    «Кинуть сообщение» длиннее «смски», но большая точность никому нафиг не сдалась.

                    Кстати, как того же шеф-повара «развернуть»?

                    Главный повар, хотя список прав и обязанностей у него ого-го какой. Хотя стоп, тут шеф — главное слово, а повар — уточнение…

                    А вот тут примеры в студию

                    «Генопатология» подойдёт?
                    • 0
                      большая точность никому нафиг не сдалась
                      Процесс примитивизации языков, подобный обтачиванию гальки водой, продолжается тысячелетиями, и по английскому, французскому и китайскому хорошо видно, до чего он может дойти. А Вы тут сообщения куда-то закидывать собрались. Еры конечные верните в фонетику, для начала. Это в горах орать избыточность хороша да под нос бубнить, а в итертах, кгд цлсть и тк кнтрлц на нижх урнях, она наф не над.
                      Главный повар
                      Ясно, пойду-ка натяну я штаны из генуэзской парусины да снесу вычислитель в осередь служебную, дабы державную действенную целину на него накатили, а то кажет вычислитель мне на заслонке какие-то буквицы немецкия непонятныя, да ещё в лакомый кусок дощицы литерной их пихать смеет, одно слово восьмидвуцное на литеры латинские тратя, да два слова — на литеры русския, православныя. Гоже ли пользоваться-то таким? Нет уж, снесу-ка оборудование сие бесовское лучше ростовщикам.
                      «Генопатология» подойдёт?
                      Ну вообще я смешанноязычные имел в виду. Тут из прижившихся и транслитерировашихся морфем.
      • –7
        потому что «нечего сказать, докопайся до орфографии»
    • +2
      Так выглядит слово Андроид, когда его пишешь в OSX.
  • +2
    Голубой цвет в радуге пропущен
    • +4
      Открою вам Америку — не в каждой культуре в радуге 7 цветов…
      • –1
        Что характерно, Америку.
      • –1
        • –1
          и вы туда же. Радуга это радуга. ЛГБТ это отдельно.

          это английские цвета радуги. источник
          • 0
            То есть «липовый чай» — взаимоисключающие параграфы, а под «мокрой киской» всегда следует подразумевать… мокрую киску?
            • 0
              «липовый чай» — взаимоисключающие параграфы
              тут нет взаимоисключающих параграфов

              под «мокрой киской» на техническом форуме хотелось бы подразумевать именно мокрую кошку, если не указан иной контекст.
              • 0
                тут нет взаимоисключающих параграфов
                Но если любую бодягу, а не только из чайных листьев, называть чаем, то почему любую шестицветную радугу надо приплетать к ЛГБТ? В конце концов, радуга на самом деле ни фига не шестицветная и не семицветная, спектр непрерывен (ну до квантовых пределов изменения длины волны, конечно, или даже до кванта чувствительности колбочек, учитывая, что цвет — вещь полусубъективная). А то, что англоязычные (и далеко не только англоязычные) не различают в обиходном наборе цветов голубой и синий — довольно общеизвестный факт, но ужаленные гомофобы его почему-то игнорируют. Видимо, даже не способны задуматься, какие там в радуге цвета (ничего личного).
                на техническом форуме хотелось бы подразумевать именно мокрую кошку
                А зачем на техническом форуме кошки? Разве что монтёрские.
                • 0
                  написал в личку, чтобы не разводить тут флуд.

                  а про про кошек на хабре много чего есть: Ok, Google
      • 0
        Открою вам Сан-Франциско — шесть делится на два
  • +2
    За Comic Sans MS спасибо, давно не видел.
    • 0
      Недавно видел его на вывеске какого-то клуба. Был впечатлен.
  • +2
    Вдвойне обидно, что и автор, и переводчик, судя по всему, не подозревают о существовании Firefox.
    • 0
      А какой там реальный процент лисы на маках? Мне нагуглить не удалось, но кажется он вообще махонький
  • 0
    Попробовал — отвратно.
    Использовать решение, предложенное автором (с SFNSDisplay) — это выстерлить себе в ногу. Смысл шрифта Сан-Франциско — в том, что он должен меняться: при мелком размере это текстовый шрифт (.SFNSText-Regular), при крупном — .SFNSDisplay-Regular. В мелком размере гельветика читается лучше чем шрифт, задуманный быть крупным.
    Пока не сделают юзабельный способ его подключения, использовать рано. Ну разве что сделать шаманство с размером шрифта, но это совсем уже трэш и угар.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.