Как я углубился в наш следующий отзывчивый сайт, я изучаю варианты использования системных шрифтов для версий телефонов. И мне интересно несколько вещей.
Прежде всего, если мы укажем шрифт, который находится на устройстве (например, системный шрифт), но у нас также есть вызов 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, чтобы использовать его.
Я нашел следующую настройку семейства шрифтов, предоставляющую стандартные системные шрифты на всех мобильных устройствах:
font-family: system,-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;
Этот фрагмент 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-трюках.
Если вы объявляете, скажем, 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
, который является допустимым именем для системного шрифта без засечек.