Веб-дизайнеры-любители обычно начинают с использования старого тега HTML «font» для определения начертания шрифта для определенных блоков текста; однако профессиональные веб-дизайнеры вскоре осознают ценность добавления веб-безопасных шрифтов в свой репертуар программирования.
Шрифты веб-страницы
Правильное отображение шрифта на веб-странице иногда бывает непростой задачей. Если учесть, сколько людей потенциально может посетить ваш веб-сайт, и какие платформы используют эти посетители, масштаб проблемы становится гораздо более очевидным. Различные типы устройств, такие как Windows, Mac или Linux, могут существенно повлиять на отображение вашей веб-страницы.
Каждая операционная система, например Windows XP или Windows Vista, обрабатывает шрифты по-разному. По этой причине важно избегать использования слишком экзотических шрифтов или веб-встроенных шрифтов . Это дает разработчикам возможность использовать более эксцентричные шрифты, но недостатком является то, что не все операционные системы будут правильно их интерпретировать.
Кодирование шрифтов веб-страницы
Метод определения шрифта на веб-странице также изменился. Традиционно веб-дизайнеры использовали простой тег HTML «font», чтобы указать браузеру, какой шрифт использовать для отображения текста веб-страницы:
<font face=»verdana» color=»green»>Эта строка зеленого цвета и шрифта verdana.</font>
Веб-дизайнеры использовали этот подход в течение многих лет, пока появление новых технологий и стандартов форматирования веб-сайтов не упростило форматирование нескольких веб-страниц из одного файла форматирования. Разработчики веб-сайтов теперь могут использовать файлы CSS для форматирования таких элементов, как типы шрифтов, размеры и другие параметры стиля на своих веб-страницах. Например, чтобы определить шрифт определенного размера заголовка, дизайнер использует следующий синтаксис:
h5 { семейство шрифтов: с засечками; }
Использование «семейства шрифтов» в файле CSS теперь является общепринятым методом определения шрифта на вашей веб-странице. Однако, даже когда шрифты запрограммированы правильно, проблема обеспечения того, чтобы шрифты вашего веб-сайта работали на всех системах, все еще остается.
Выбор веб-безопасных шрифтов
Веб-дизайнеры, которые хотят, чтобы веб-страница хорошо работала на всех платформах, должны тщательно продумать шрифт. Безопасные веб-шрифты вызывают споры; если вы поищите в блогосфере, какие шрифты «безопаснее», чем другие, вы найдете самые разные мнения. Эта дисперсия зависит от вероятности того, что в системе людей будут установлены определенные шрифты.
Все знают, какие шрифты входят в стандартную комплектацию каждой операционной системы, но программное обеспечение, которое люди выбирают для установки, которое обычно расширяет возможности шрифтов, представляет собой игру в угадайку. Тем не менее, некоторые шрифты, скорее всего, будут присутствовать во всех системах.
Самые безопасные веб-шрифты
Принимая во внимание несколько обзоров шрифтов в Интернете, следующие шрифты неизменно входят в список 10 самых «безопасных» шрифтов для использования:
- Вердана
- Ариал
- Ариал Блэк
- Комикс Санс МС
- Новый Курьер
- Грузия
- Таймс Нью Роман
- Требюше МС
- Готика века
- Влияние
Использование одного из этих шрифтов значительно повышает ваши шансы на правильное отображение веб-страницы независимо от операционной системы.
Делаем безопасные шрифты еще безопаснее
Важно отметить, что, хотя наиболее безопасные шрифты (Verdana, Arial и Arial Black) используются более чем 90 процентами пользователей компьютеров PC и Mac, едва ли 60 процентов пользователей Linux установили эти шрифты. Это делает маловероятным, что 100 процентов людей, посещающих ваш сайт, смогут его просмотреть. Тем не менее, это возможно , чтобы закрыть этот пробел, предоставляя несколько шрифтов в CSS «семейство шрифтов» со следующим кодом:
h5 { семейство шрифтов: Verdana, Geneva, без засечек; }
Вместо того, чтобы предоставлять браузеру один шрифт и потенциально создавать ошибку, если этот шрифт не установлен, «семейство шрифтов» предоставляет браузеру список шрифтов на выбор. Они идут от первого выбора слева до третьего выбора справа. Например, в приведенном выше коде браузер отобразит заголовок H5 со шрифтом Verdana, если он доступен, если нет, он вернется к вашему второму варианту, Женева. Если ваш второй вариант недоступен, браузер вернется к общему шрифту «sans-serif». Использование этого подхода почти гарантирует, что у ваших посетителей никогда не возникнет проблем с просмотром шрифта вашего веб-сайта, независимо от используемой ими системы.
Если у вас есть мнение о десяти самых безопасных веб-шрифтах, перечисленных выше, поделитесь своим мнением в разделе комментариев ниже.