Среди фронтенд-разработчиков, привыкших к уютному миру Windows и macOS, бытует одно опасное заблуждение. Оно звучит так: «Если мой код валиден (XHTML 1.1 Strict, привет из 2000-х!), а CSS написан по спецификации, то сайт будет выглядеть одинаково везде».
Но стоит такому разработчику поставить условную Ubuntu или openSUSE, как мир рушится. Шрифты становятся корявыми, кнопки «раздуваются», а блоки, которые филигранно подгонялись пиксель в пиксель, начинают наезжать друг на друга.
Реакция — Почему Linux игнорирует мой CSS и подставляет свои шрифты?
Сразуу расставим точки над i: Linux ничего не игнорирует. Ваш браузер — будь то Chromium или Firefox — честно читает каждую строчку стилей. Проблема в том, что мы часто воспринимаем CSS как жесткий приказ, хотя на самом деле это лишь набор пожеланий. И когда система не может их выполнить, она включает режим «самодеятельности», который и рушит ваш дизайн.
Проблема «исчезающих» шрифтов
Типичная ошибка новичка (и любьтелей «чистой» верстки):
codeCSS
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
Разработчик уверен, что Arial есть у всех. Но в мире Open Source шрифт Arial — это проприетарная собственность Monotype. Microsoft заплатила за лицензию, Apple заплатила, а сообщество Linux — нет.
Когда браузер в Linux видит этот список, он честно спрашивает систему: «Дай мне Arial». Система отвечает: «Нет такого». Браузер спрашивает про Helvetica. Ответ тот же. В итоге срабатывает последний фолбек — sans-serif.
И вот тут начинается магия подстановок. В зависимости от дистрибутива, система подсунет вместо Arial что угодно: Arimo, Liberation Sans или какой-нибудь DejaVu Sans.
Ну и что? Они же похожи
А вот и нет. И в этом кроется главный подвох. Даже если шрифт называется «метрически совместимым» (как допустимLiberation Sans по отношению к Arial), это не значит, что он идентичен.
-
Метрики глифов: Буква «W» в Liberation Sans может быть на пару пикселей шире, чем в Arial.
-
Межбуквенное расстояние (кернинг): На длинной строке эти микро-различия накапливаются.
-
Хинтинг и сглаживание: В Linux за отрисовку отвечает FreeType. У него свои алгоритмы сглаживания, которые отличаются от Windows ClearType. Один и тот же шрифт в Linux может казаться более «жирным» или «размытым».
Итог: Ваша кнопка, ширина которой была рассчитана ровно под слово «Зарегистрироваться» шрифтом Arial, в Linux просто «взрывается», потому что слово стало шире на 5 пикселей. CSS выполнен? Да. Сайт сломан? Тоже да
Иллюзия контроля и ловушка XHTML 1.1 Strict
Многие разработчики старой закалки (или те, кто начитался учебников десятилетней давности) до сих пор верят в магическую силу XHTML 1.1 Strict. Логика простая: «Если мой код проходит валидацию W3C, браузер обязан отобразить его идеально».
Спешу расстроить: валидатор проверяет только синтаксическую чистоту вашего кода. Ему плевать, как этот код превращается в пиксели на мониторе. Вы можете написать идеально валидный XHTML, но если вы жестко задали размеры контейнеров под конкретный шрифт, которого нет в системе — ваша верстка рассыплется.
Проблема в том, что веб — это не PDF. В PDF шрифты встроены в документ. В вебе вы лишь даете браузеру «рецепт» страницы, а ингредиенты (шрифты, системные цвета, настройки сглаживания) он берет на кухне пользователя. И если на кухне openSUSE нет «масла» (Arial), повар заменит его «маргарином» (Liberation Sans).
Кто на самом деле командует парадом?
Вы думаете, что CSS — это высшая инстанция? На самом деле в Linux над браузером стоит еще один «босс» — fontconfig. Это системная библиотека, которая управляет поиском и заменой шрифтов.
Вот как это работает «под капотом»:
-
Ваш CSS просит Arial.
-
Браузер обращается к fontconfig.
-
fontconfig видит, что Arial нет, и лезет в свои конфиги (например, /etc/fonts/local.conf или ~/.config/fontconfig/fonts.conf).
-
Там может быть прописано жесткое правило: «Всегда заменять любой запрос на Arial шрифтом Ubuntu Sans».
-
Браузер получает этот шрифт и отрисовывает его.
Важный момент: В настройках рабочего стола (KDE, GNOME) у пользователя Linux есть галочка: «Игнорировать шрифты, указанные на веб-страницах». Если она включена, ваш CSS вообще не имеет значения для типографики. Система просто принудительно рендерит всё системным шрифтом. Для пользователя это вопрос комфорта и читаемости, для разработчика — кошмар наяву.
Рендеринг: Битва движков
Даже если вы умудритесь доставить нужный шрифт пользователю (например, через @font-face), вы все равно увидите разницу. Почему? Потому что Windows использует DirectWrite, macOS — Core Text, а Linux — FreeType.
-
Windows старается «примагнитить» буквы к пиксельной сетке (хинтинг), чтобы текст был максимально четким. Иногда это искажает форму букв.
-
macOS плевать на сетку, она сохраняет идеальную форму букв, из-за чего на не-Retina мониторах текст кажется «мыльным».
-
Linux (FreeType) — это гибкий конструктор. В разных дистрибутивах настройки хинтинга и сглаживания (antialiasing) могут отличаться радикально.
В итоге одна и та же кнопка в 100 пикселей в Windows будет вмещать текст идеально, а в Linux — из-за другого алгоритма сглаживания — текст станет на 2 пикселя шире и «вывалится» из границ.
Как с этим жить?
Если вы дочитали до этого момента, то уже поняли: проблема не в Linux, а в попытке навязать вебу статичность печатного листа. В 2026 году верстать сайты, которые разваливаются от смены шрифта на аналогичный — это признак того, что ваша верстка слишком хрупкая.
Вот краткий чек-лист, как перестать бояться «пингвинов» и начать делать нормальную кроссплатформенную верстку:
-
Забудьте про системные шрифты как основу дизайна. Главный «твик», который ищут новички — это установка пакета msttcorefonts в Linux. Да, вы поставите себе Arial, и у вас всё станет красиво. Но у 90% ваших пользователей-линуксоидов его не будет. Хотите предсказуемости? Используйте @font-face и формат WOFF2. Когда шрифт прилетает вместе с сайтом, браузеру плевать на системные дефициты.
-
Прощай, Pixel Perfect. Эпоха, когда мы вымеряли каждый пиксель, ушла вместе с Internet Explorer 6. Веб — это живая среда. Пользователь может увеличить масштаб, сменить разрешение или принудительно включить другой шрифт. Если кнопка ломается от того, что текст стал на 5 пикселей шире — это плохая кнопка. Используйте гибкие контейнеры и min-width вместо жесткого width.
-
Грамотные Font Stacks. Не пишите просто Arial, sans-serif. Используйте «стеки безопасности», которые учитывают реалии разных ОС:
codeCSS
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif; -
Тестируйте в «диких» условиях. Разработка только на Windows — это профессиональная деформация. Заведите виртуалку с любой Linux-системой. Посмотрите, как ваш «валидный XHTML» выглядит там. Вы удивитесь, сколько косяков всплывет: от кривых отступов до инпутов, которые внезапно стали черными из-за системной темы KDE.
Вывод
Толк в CSS не в том, чтобы диктовать браузеру каждый пиксель, а в том, чтобы описать приоритеты. Linux не «игнорирует» ваш код — он честно показывает вам слабые места вашей верстки. Те моменты, где вы слишком сильно положились на окружение пользователя.
Веб-страница — это не картина маслом, которую вы повесили в рамку. Это скорее вода, которую вы налили в кувшин. Ваша задача как разработчика — сделать так, чтобы кувшин (браузер и ОС) не треснул, какой бы формы он ни был.
Автор: Anton19891
