Использование системных шрифтов в отзывчивом CSS

Question

Использование системных шрифтов в отзывчивом CSS

1

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

Прежде всего, если мы укажем шрифт, который находится на устройстве (например, системный шрифт), но у нас также есть вызов Open Sans (наш шрифт по умолчанию), будет ли устройство загружать шрифт Open Sans файл? Open Sans будет отображаться после системных шрифтов в объявлении семейства шрифтов.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<style type="text/css">
    body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>

Или как вызов @font-face.

<style type="text/css">
    @font-face {font-family:OpenSans; src: url('https://fonts.gstatic.com/s/opensans.woff'); }
    body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>

Если этот тип настройки устраняет загрузку шрифта и, таким образом, уменьшает использование данных для просмотра веб-страницы, мне интересно, знают ли кто-то технические аспекты системных шрифтов. В частности, какие имена будут использоваться в объявлении семейства шрифтов css? Новые андроиды просты, так как имя просто "робото", но как мы объявляем Segoe на телефоне Windows или Helvetica Neue/Lucinda на iPhones и iPads. И как определить, какие вес шрифта присутствуют и их значения (мы используем 400 и 600 в Open Sans, потому что нам не нужен настоящий тяжелый жирный шрифт).

Обновление вопроса с помощью нашего решения....

У этого действительно был ответ oh duh, мы просто установили тело css для использования системных шрифтов изначально (мобильный первый css), затем, когда мы достигнем точки останова для ноутбуков и настольных компьютеров, используйте вызов @font-face для Open Sans и обновите тело css, чтобы использовать его.

Tom 03 янв. 2015, в 11:13

Источник

0

В журнале Smashing есть статья на эту тему: smashingmagazine.com/2015/11/…
ausi 29 дек. 2016, в 22:31

Теги:

android

css

ios

fonts

windows-phone-8

3 ответа

Ещё вопросы

В журнале Smashing есть статья на эту тему: smashingmagazine.com/2015/11/…

Federico Elles · Answer 1 · 2016-02-05T04-44-00.000Z

Я нашел следующую настройку семейства шрифтов, предоставляющую стандартные системные шрифты на всех мобильных устройствах:

font-family: system,-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;

Filipp W. · Answer 2 · 2017-12-19T03-37-00.000Z

Этот фрагмент css (заимствованный из проблема в github) по умолчанию используется системный шрифт на большинстве платформ (OSX, iOS, Windows, Windows Phone, Android, Ubuntu):

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

-apple-system - Сан-Франциско в Safari (в Mac OS X и iOS); Neue Helvetica и Lucida Grande в более старых версиях Mac OS X.
system-ui - шрифт UI по умолчанию на данной платформе.
BlinkMacSystemFont - эквивалент -apple-system, для Chrome в Mac OS X.
"Segoe UI" - Windows (Vista +) и Windows Phone.
Roboto - Android (сэндвич с мороженым (4.0) +) и Chrome OS.
Ubuntu - все версии Ubuntu.

Шрифты для других ОС или более старых версий их можно найти в этой статье статьи о CSS-трюках.

Jukka K. Korpela · Answer 3 · 2015-01-03T11-33-00.000Z

Если вы объявляете, скажем, body { font-family: roboto, segoe, helvetica, 'open sans', sans serif; }, а у пользовательского устройства установлен шрифт с именем roboto, и он содержит глифы для всех символов в содержимом, тогда остальную часть списка семейств шрифтов следует игнорировать. Это означает, что если некоторые из этих шрифтов объявлены как загружаемый шрифт с помощью @font-face (прямо или косвенно с помощью кода, предоставленного Google), загрузка не должна происходить. Но если в этом шрифте присутствует какой-либо символ, тогда список должен быть обработан дальше, и это должно привести к загрузке шрифта, если в предыдущем шрифте нет символа.

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

Что касается конкретных имен шрифтов, объявление segoe бесполезно. Нет такого шрифта; Segoe UI существует во многих системах Windows. Имя helvetica означает, в принципе, шрифт, который в основном доступен только на устройствах Apple, но на практике Windows, как ни странно, воспринимает это как значение Arial, если только система не установлена на самом деле Helvetica. Объявление sans serif бесполезно; такого шрифта нет; вы, вероятно, имели в виду sans-serif, который является допустимым именем для системного шрифта без засечек.

Благодарю. Да, отсутствующий дефис в без засечек был опечаткой. И спасибо за имя Windoss - Segeo UI. Теперь все, что мне нужно, - это правильные названия версий Helvetica (Neue или что-то в этом роде) и Lucinda, которые используют iPhone и iPad.