Что такое системный стек шрифтов?

Question

Многие популярные веб-сайты (включая Stack Overflow, GitHub, Medium и Wordpress) приняли использование стека системных шрифтов.

1. Что такое стек системных шрифтов?
2. Зачем мне использовать системный стек шрифтов?
3. Как должен выглядеть системный стек шрифтов?
   

Существует много разных сайтов с разными версиями стека системных шрифтов, но не очевидно, какой из них наиболее актуален и наиболее совместим с современными устройствами:

• systemfontstack.com
• CSS Уловки: стек системных шрифтов

Связанные вопросы:

• Действительно ли указание «Roboto» в «стеке системного шрифта» делает что-нибудь?
• Как указать семейство шрифтов с засечками и без засечек по умолчанию ?

Answer 1

Что такое системный стек шрифтов?

Свойство CSS font-family принимает список шрифтов и использует первый из них, доступный браузеру.

Системный стек шрифтов (не системный) - это список шрифтов, которые:

• , вероятно, будут установлены на многих компьютерах (с целью иметь хотя бы один шрифт в стеке. доступно на на каждом компьютере, который может просматривать веб-сайт)
• похожи по внешнему виду, поэтому дизайн согласован (например, одинаковая ширина букв и т. д. c)

Как я уже сказал, это «а», а не «дело». Список системных шрифтов, подобных Ariel, будет отличаться от списка шрифтов, аналогичных Times New Roman.

Почему я должен использовать стек системных шрифтов?

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

Как должен выглядеть системный стек шрифтов?

Это вопрос мнения.

Хотя это подтверждается наукой (люди изучают доступность шрифтов на разных устройствах), какие шрифты вы хотите использовать и решите, что они достаточно похожи для ваших целей, это не так. вырезать и dry.

Answer 2

1. Что такое системный стек шрифтов?

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

W3 C CSS Fonts Module 4: system-ui

2. Зачем мне использовать системный стек шрифтов?

Цель system-ui - позволить веб-контенту интегрироваться с внешним видом собственной ОС.

W3 C CSS Модуль 4 шрифтов: system-ui

3. Как должен выглядеть стек системного шрифта?

Если вам не нужна поддержка устаревших браузеров (в основном IE), system-ui охватывает все современные браузеры, кроме Firefox. Для Firefox вы все равно можете использовать -apple-system для macOS и iOS с чем-то вроде font-family: system-ui -apply-system;.