CSS: почему Chrome (в Linux) игнорирует мою семью шрифтов?
Когда я проверяю элементы на своем сайте с помощью инструмента разработчика Chrome, я вижу в качестве стиля "Вычисленные" моего элемента следующее:
font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif
Но если я прокручиваю дальше (до нижней части вкладки "Вычисленные"), я вижу:
Rendered Fonts
Liberation Sans—Local file(11 glyphs)
Так как моя (Linux) ОС должна иметь Arial а также sans-serifЯ не совсем понимаю, почему Chrome выбрал "Liberation Sans": его даже нет font-family список.
Я бы обвинил свой собственный плохой CSS, но теоретически на вкладке "Computed" отображается окончательная / обработанная версия моих правил, поэтому, как бы ужасно ни был мой оригинальный CSS, Chrome четко видит мой font-family список, определенный (и применяемый) к моему элементу... он просто игнорирует его.
Кто-нибудь может объяснить эту тайну?
РЕДАКТИРОВАТЬ: я установил программу проверки шрифтов, и оказывается, что Linux (Mint) на самом деле не идет с Arial или же sans-serif шрифт... но даже в этом случае, я думал, что браузеры предоставляют (по крайней мере) основные sans-serif шрифт, не важно какая ОС? Это неверно?
3 ответа
В вашем стеке шрифтов указан Arial.
Arial отсутствует в большинстве систем Linux по причинам лицензирования, и он обычно имеет псевдоним Liberation Sans, так как Liberation Sans имеет те же измерения (метрики), что и Arial. Однако дизайн шрифта отличается (поэтому Liberation Sans обычно не является стандартным шрифтом Linux Sans Serif, его дизайн не популярен).
Helvetica - это другое известное устаревшее название шрифта, которое обычно отсутствует. Если вы попытаетесь использовать его в стеке шрифтов, он, как правило, вызовет все виды псевдонимов. Он может даже вызвать псевдоним Liberation Sans до Arial (поскольку Arial был заменой Helvetica от Microsoft при запуске Windows и имеет примерно те же показатели).
(Когда вы создаете PDF, который указывает Helvetica в Windows, он обычно заменяет ArialMT).
Если вы укажете только sans-serif, вы получите системный "лучший" шрифт без засечек, как правило, чистый любимый дизайн, но его размеры сильно различаются от системы к системе.
Из-за большого количества неработающих веб-сайтов, разработчики которых предполагают, что все системы поставляются с одинаковыми шрифтами, с одинаковой шириной в пикселях, которую можно фиксировать в дизайне страницы, замена шрифта обычно выполняется по метрике первый, а дизайн - второму приоритету.
Единственный способ получить один и тот же шрифт на всех клиентах - это использовать веб-шрифты, но это замедлит ваш сайт из-за загрузки шрифтов, и пользователи (а не "дизайнеры") предпочитают быстрые страницы. Веб-шрифты требуют осторожности в отношении лицензирования и охвата шрифтов Unicode, пользователи, которые заботятся о безопасности, будут блокировать сторонние загрузки, и существует множество проблем с неясными форматами веб-шрифтов (в настоящее время opentype достаточно в большинстве браузеров).
Маньяк Apple, который считает HelveticaNeue альфой и омегой, обычно устраивает Open Sans в качестве веб-шрифта.
Но даже с веб-шрифтами рендеринг будет немного отличаться, так как разные системы используют разные текстовые движки, которые имеют свою специфику, причем некоторые шрифты работают лучше, чем другие для данного движка.
В Chrome для Linux есть два механизма отката шрифтов. Один из них - это откат на уровне ОС. Другой вариант - это резервный вариант, указанный в CSS. Резервный механизм на уровне ОС возвращает Liberation Sans в Chrome вместо none или not found, пока Chrome спрашивает, доступен ли HelveticaNeue в вашей ОС. Chrome берет возвращенный Liberation Sans и считает, что ОС вернула ответ, поэтому игнорирует список резервных шрифтов CSS.
Я вижу, что у вас есть и Helvetica, и Arial в свойствах вашего семейства шрифтов. Я предполагаю, что вы хотите Arial, когда Helvetica недоступна... Ответ на вопрос, который имеет дело с этим: два шрифта
Теперь, если бы я хотел иметь только одно семейство шрифтов, такое как Century Gothic, я бы сделал:
font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;
Это хорошее руководство.
Мой вопрос, почему у вас так много
Поскольку Google Chrome иногда оставляет WWW из URL, вы можете попробовать поставить его вручную. Особенно в системе Unix или Mac.