Как веб-браузер выбирает шрифт из семейства шрифтов?

Question

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

На веб-странице (например, stackoverflow ), спецификация стиля шрифта включите шрифт Arial в список семейства шрифтов. Используя функциональность элемента проверки Firefox и удаляя запись Arial из font-family, внешний вид меняется.

Загадочно то, что я работаю на операционной системе GNU / Linux и Я не нашел какой-либо шрифт из семейства шрифтов Arial (с помощью команд fc-list и locate).

Как определить, какой шрифт будет использоваться?

Также может возникнуть вопрос: какой шрифт «Arial» для firefox, если на компьютере нет шрифта с именем Arial?

Answer 1

Похоже, что Firefox включает шрифты Liberation Sans в семейство шрифтов Arial и с удовольствием их использует, если Arial указано в css. Это имеет смысл, поскольку шрифты спроектированы так, чтобы быть похожими.

Answer 2

Вы предоставляете руководство, но не можете решить, какой браузер использует конечный пользователь, поскольку не уверены, что нужный шрифт загружен. Рекомендуется использовать разделенный запятыми список, в котором браузер будет пытаться перейти от начала списка к следующему и так далее, если запрошенный шрифт недоступен. Опция generi c, такая как sans-serif, очень часто используется в качестве последнего средства для отказа.

От MDN:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family