Для большинства веб-дизайнеров и разработчиков тестирование является огромной частью работы. Они потратят значительное количество времени на то, чтобы их сайты выглядели похожими, если не идентичными, в самых разных браузерах. Однако одна из ключевых частей тестирования сайта, похоже, слишком часто забывается: тестирование стека шрифтов.
Проблема
Большинство веб-дизайнеров полагаются в основном на набор бесплатных, широко распространенных шрифтов для большей части текстового контента своего сайта. Тем не менее, независимо от того, насколько широко доступен шрифт, есть вероятность, что он будет отсутствовать в системе данного посетителя. К счастью, CSS позволяет нам указать стек шрифтов, которые будут использоваться в случае, если предпочтительный шрифт отсутствует. Указав таким образом три или четыре шрифта, а затем универсальный перехват с serif или sans-serif , мы гарантируем, что наш контент отображается шрифтом, который по крайней мере напоминает тот, который мы хотели. Теоретически это здорово, но если внешний вид сайта не проверяется с каждым из возможных резервных шрифтов, могут возникнуть проблемы. Например, при просмотре веб-сайта PharmQD на моем домашнем компьютере (под управлением Ubuntu Linux) я вижу следующее:
Как видите, заголовки разбиты на лишнюю строку, чего дизайнеры явно не ожидали, когда собирали макет. Почему? Поскольку для этих названий используется стек шрифтов: Tahoma, Verdana, Arial, Helvetica, sans-serif; и Tahoma значительно уже (при том же размере и весе шрифта), что и Verdana или Arial. Поэтому при просмотре в системе без Tahoma используется запасной шрифт, и поскольку все запасные варианты шире, текст занимает больше места, чем предполагалось в дизайне. Вот как должен был выглядеть дизайн, на этот раз на моей рабочей машине под управлением OS X:
Tahoma не единственный шрифт, уязвимый для такого рода поломок. Шрифты Microsoft Vista (Calibri, Cambria, Candara и Constantia) значительно меньше, чем большинство других шрифтов с одинаковым размером точек, поэтому использование любого из них в стеке может привести к аналогичным проблемам.
Инструменты тестирования
Как ни странно, несмотря на множество инструментов тестирования, доступных для веб-разработчиков, не существует простого ответа для тестирования стеков шрифтов. Одно из далеко не идеальных решений — использовать Firebug для ручного редактирования объявлений семейства font-family связанных с частями страницы, которые сильно зависят от размера шрифта: кнопки, элементы навигации, заголовки и т. Д.
Быстрый поиск в Google также показал этот многообещающий проект Роберта Ли-Канна на Github: Font Stack Tester . Это скрипт jQuery, который добавляет оверлей вверху страницы с кнопками, чтобы отключить любой из шрифтов, найденных на странице. Разработчик хочет в конечном итоге превратить его в букмарклет, но на данный момент он определенно находится в зачаточном состоянии.
Обновление: за несколько дней с тех пор, как я впервые опубликовал это, предприимчивый человек зарегистрировал http://fontstacktester.com/ и разместил размещенную версию этого проекта GitHub. Просто введите URL вашего сайта, и он перенесет вас туда, добавив полосу вверху, которую вы можете использовать для отключения шрифтов один за другим, чтобы проверить, как ваши стеки держатся. Слава Крису за скорость, с которой это было разработано!
Независимо от того, как вы поступите с этим, проверкой стека шрифтов определенно не следует пренебрегать: когда что-то ломается так сильно, как в примере выше, это может действительно повредить впечатлению посетителя о вашем сайте.