Новый взгляд на семейство шрифтов для веб-шрифтов

Я уже писал статью о введении и использовании веб-шрифтов:

• Шрифты, которые вы должны знать о семействе шрифтов.

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

Текст начинается здесь.

Последнее семейство шрифтов крупных веб-сайтов

По привычке при просмотре различных веб-сайтов мне всегда нравится открывать инструменты разработчика и время от времени проверять элементы. Проверьте некоторые известные веб-сайтымобильныйизfont-family:

• Торговый центр:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
• CSS-Tricks:font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;

Интересно, что-то вродеsystem-ui,-apple-system,BlinkMacSystemFontподожди несколько лет назадfont-familyОпределения шрифтов, которые почти не встречаются в . Кто они такие? Это определенный шрифт?

Основы шрифтов

Прежде чем продолжить, давайте кратко рассмотрим некоторые основы шрифтов.

С засечками против без засечек

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

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

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

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

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

ключевое слово семейства шрифтов

для CSSfont-familyНапример, он имеет два типа значений.

1. Класс - это что-то вроде этого конкретногоназвание семейства шрифтовопределение:font-family: ArialЗдесь определяется конкретный стиль шрифта и имя семейства шрифтов.Arial;

2. КлассОбщее название семейства шрифтов, который является альтернативным механизмом предоставления лучшего шрифта, когда указанный шрифт недоступен, например:font-family: sans-serif.

в,sans-serifСемейство шрифтов Table sans serif, например, «Open Sans», «Arial», «Microsoft Yahei» и т. д.

оОбщее название семейства шрифтов,существуетCSS Fonts Module Level 3 -- Basic Font PropertiesВ , 5 определены, то есть несколько распространенных названий семейств шрифтов, с которыми мы знакомы:

1. семейство шрифтов с засечками
2. Семейство шрифтов без засечек без засечек
3. моноширинный моноширинный шрифт, то есть ширина каждого слова в шрифте одинакова
4. курсивный курсивный шрифт
5. фэнтези - это в основном шрифты со специальными художественными эффектами

Добавлены общие ключевые слова семейства шрифтов.

пока вCSS Fonts Module Level 4 -- Generic font families, было добавлено несколько новых ключевых слов:

• system-ui системный шрифт по умолчанию
• emoji для совместимых символов emoji
• математика работает с математическими выражениями
• fangsong Это семейство шрифтов используется для китайских (фальшивых) шрифтов Song.

Рассмотрим наиболее часто используемыеsystem-ui.

system-ui

Проще говоря,font-family: system-uiЦель состоит в том, чтобы автоматически выбирать системный шрифт по умолчанию в этой операционной системе на веб-страницах разных операционных систем.

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

San Francisco Fonts

Хорошо, легко понятьsystem-uiсемейство шрифтов. но, как-apple-system,BlinkMacSystemFontне появляется в последнем стандарте. Что они имеют в виду?

Перед этим давайте разбиратьсяSan Francisco Fonts.

San Francisco FontsТакже известный как шрифт Сан-Франциско, это западный шрифт. Когда выйдет обновление iOS 9, оно будет поставляться вместе с Apple Watch в WatchOS, а также будет доступно в новой tvOS на Apple TV.

San Francisco FontsИспользуется для замены и обновления другого западного шрифта в системе iOS.Helvetica Neue. Apple внесла несколько важных изменений, чтобы сделать его лучшим, даже идеальным западным шрифтом на платформе.

-apple-system/BlinkMacSystemFont

так или иначе. Как известно каждому фронтенд-разработчику, одно дело — добавить функцию в спецификацию, и совсем другое — добавить ее в браузер.

К счастью,system-uiбыстро распространяться. И Chrome, и Safari полностью поддерживают его на различных платформах. Отстают только Mozilla и Windows.

Взгляниsystem-uiсовместимость,Can i Use -- system-ui(дата перехвата изображения 13 августа 2019 г.):

Посмотрите внимательно на последние две строки изображения выше:

• Supported as the -apple-system value (only on macOS and iOS)
• Supported as the BlinkMacSystemFont value (only on macOS)

Учитывая разные платформы и обратную совместимость, на macOS и iOS нам нужно использовать-apple-systemиBlinkMacSystemFontбыть совместимымsystem-uiстандарт.

Segoe UI

Segoe UI — это семейство западных шрифтов по умолчанию в Windows, начиная с Vista, оно содержит только западные символы и не поддерживает китайские символы, относится к шрифту без засечек.

Он также представляет семейство, а не один шрифт. использоватьfont-family: Segoe UIВы можете выбрать лучший западный шрифт для отображения на платформе Windows и Windows Phone.

Roboto

Roboto — это семейство шрифтов без засечек, разработанное для операционной системы Android. Google описывает шрифт как «современный, но доступный» и «эмоциональный».

Это семейство шрифтов включает тонкий, светлый, обычный, средний, жирный, черный шести насыщенностей и соответствующий курсив.

в заключении

На этом мы можем подвести итоги. отCSS-TricksВ качестве примера определяется семейство шрифтов веб-сайта:

{
  font-family: 
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

1. system-ui, используйте системный шрифт по умолчанию на каждой поддерживаемой платформе
2. -apple-system, в некоторых более ранних версиях Mac OS X и iOS он обновляется до более подходящих шрифтов San Francisco для шрифтов Neue Helvetica и Lucida Grande в более старых версиях.
3. BlinkMacSystemFont для некоторых браузеров Chrome в Mac OS X использует системный шрифт по умолчанию.
4. segoe ui, выберите системный шрифт по умолчанию в Windows и Windows Phone
5. Roboto для Android и некоторых более новых версий Chrome OS.
6. Helvetica, Arial, после установки системных шрифтов по умолчанию для разных операционных систем и разных платформ, решения для понижения версии для некоторых браузеров более ранних версий
7. без засечек, восходящее решение, чтобы обеспечить единый стиль шрифта, по крайней мере, это должен быть шрифт без засечек

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

Охватывает iOS, MAC OS X, Android, Windows, Windows Phone и все основные операционные системы, часто используемые пользователями.

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

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

Конечно, вышеfont-familyОпределение не обязательно является оптимальным. Например, Tmall добавил вверху"PingFang SC",miui,..Должны быть и их деловые соображения. Однако некоторые резервные схемы обратно совместимы с той же идеей, которую стоит изучить.

Наконец

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

• Using UI System Fonts In Web Design: A Quick Practical Guide
• System Fonts in CSS
• Шрифт Сан-Франциско от Apple

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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