Стандартные и веб-шрифты

Родственные темы >

Стандартные и веб-шрифты

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

Выбор шрифта - очень важный этап работы, поскольку он оказывает большое влияние на эффектность графического исполнения веб-страницы. Чтобы осознать это, достаточно сказать, что 90% информации в Интернете текстовые. Таким образом, при создании сайтов очень важно использовать не только красивые, но и удобочитаемые с экрана шрифты, а также быть уверенными в том, что все посетители сайта смогут их корректно отобразить, вне зависимости от браузера или устройства, которые они используют для навигации.

Кликните, чтобы развернуть/уменьшитьУдобочитаемость шрифтов

Удобочитаемость шрифта, в основном, зависит от следующих факторов: вида, к которому он относится, "высоты х" и общего размера символа.

Вид - что касается вида, в Интернете наиболее удобочитаемыми являются шрифты sans-serif (без насечек и штрихов, как Arial или Elvetica), а шрифты serif (с насечками, как Times New Roman, Georgia или Palatino) больше подходят для печатных документов. Шрифты cursiv (курсивный, например, Arabic) и fantasy (fantasia, как Symbolix), недостаточно эффективно поддерживаются браузерами. И наконец, шрифты monospace (фиксированной ширины, как Courier), использованные для длинных текстов, вызывают утомление глаз, и в Интернете используются только для публикации фрагментов кода.
Высота x - под "высотой x" подразумевается высота символа строчной буквы x. Такой шрифт, как Times New Roman, например, имеет среднюю удобочитаемость на экране компьютера, вследствие умеренной высоты х. Символы таких шрифтов как Verdana, разработанных специально для чтения с экрана, наоборот, имеют повышенную высоту х, особенно в сравнении с другими типами символов с аналогичным размером точек.
Кликните, чтобы развернуть/уменьшитьСтандартные Шрифты или Web Safe Шрифты

Кроме удобочитаемости, до того как был введен CSS3, еще одним фактором, серьезно влияющим на выбор шрифта для веб-страниц, была поддержка браузером. Фактически, было обязательно использовать только стандартные шрифты, или общераспространенный, а значит имеющийся в большинстве компьютеров набор символов.  

IНа практике, при создании веб-страницы клиенту сообщается, какой шрифт использовать для рендеринга текста. Клиент выполняет поиск требуемого шрифта среди всех шрифтов, имеющихся в используемом компьютере: если таковой имеется, выполняет работу в соответствии с инструкцией, в противном случае - использует шрифт по умолчанию.

Таким образом, этот механизм обусловливал необходимость всегда использовать одни и те же шрифты (Arial, Verdana, Georgia и несколько других), чтобы обеспечить достижение результата, требуемого для своих веб-страниц, значительно ограничивая креативность разработчиков.

Кликните, чтобы развернуть/уменьшитьНестандартные и веб-шрифты

С введением CSS3 появилась возможность использовать для веб-страниц нестандартные шрифты, с помощью команды @font-face, как раз, можно отправить клиенту файл (в форматах TTF, EOT, WOFF или SVG в зависимости от используемого браузера), содержащий набор символов для использования на конкретной странице.

Таким образом, клиенту больше не нужно искать, установлен ли нужный шрифт в его компьютере, а можно сразу использовать набор символов, связанный с таблицей символов самой страницы.

Поэтому, благодаря CSS3, стало возможным вставлять в веб-страницу любой веб-шрифт, обеспечивая его закачку пользователю.

Существуют 2 основных метода использования веб-шрифтов:

использовать шрифты, имеющиеся в нашем компьютере, публикуя файл шрифта (с различными расширениями) на веб-сервере сайта;
использовать внешний сервис, такой как Google Fonts™ (бесплатный) или Adobe Typekit (платный), предлагающие веб-шрифты уже готовые к использованию, вызываемые посредством таблиц стилей (CSS) страниц сайта.

Недостаток этих решений заключается в том, что пользователю приходится загружать веб-шрифты, которые оказывают более или менее значительное влияние на время загрузки страницы. В сравнении с этим, их преимуществом является большая свобода в форматировании текстов и возможность создания более красивых и интересных макетов. В случае использования шрифтов Google, шрифты остаются заахривированными на сервере Google, при этом не требуется даже их публикация на сервере веб-сайта.

Кликните, чтобы развернуть/уменьшитьНесколько советов

Сейчас, когда, благодаря веб-шрифтам, можно и Интернете реализовать свое творческое начало с той же свободой, к которой мы привыкли, работая на ПК, нужно проявлять осторожность и не злоупотреблять ими. Стоит прислушаться к некоторым советам:

Лучше использовать небольшое количество шрифтов и небольшое количество размеров: страницы будут выглядеть упорядоченнее и аккуратнее. ,
Необходимо избегать случайных изменений и применять тот же тип символа и то же сочетание стилей для всех страниц: сайт получится однородным и последовательным.
Важно встраивать в страницы только веб-шрифты и соответствующие стили, эффективные для использования: файлы веб-шрифтов должны загружаться пользователем, поэтому следует анализировать их влияние на время загрузки страниц.
Важно всегда контролировать наличие лицензии на используемые шрифты: существуют шрифты для бесплатного использования в Интернете, другие же могут быть использованы только для печати или только в определенных условиях, каждый случай должен рассматриваться индивидуально.
Кликните, чтобы развернуть/уменьшитьИспользовать веб-шрифты в WebSite X5

Предусмотрено множество мест, в которых WebSite X5 позволяет выбрать шрифт для дальнейшего использования: безусловно, опция выбора шрифта есть в редакторе текстовых объектов, а также в редакторе заголовков/нижних колонтитулов страниц шаблона, а также, в целом, всегда когда речь идет о тексте, является ли он контентом, пунктом меню, значком и т.д...

В любом случае, выбор типа символов осуществляется посредством меню, в котором автоматически отображаются все шрифты, установленные на компьютере. Этот список может быть расширен путем добавления веб-шрифтов, найденных в Интернете, без необходимости установки их в систему (см. Как использовать веб-шрифты).

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

Типы шрифтов легко различаются благодаря ассоциируемым с ними пиктограммам:

Шрифты Google— шрифты, встроенные посредством окна Добавить веб-шрифты программы WebSite X5 и связанные с сервером Google.

Онлайновые веб-шрифты— шрифты, встроенные посредством окна Добавить веб-шрифты программы WebSite X5 и связанные с сервером сервиса, предлагающего шрифты.

Оффлайновые веб-шрифты— шрифты, встроенные посредством окна Добавить веб-шрифты программы WebSite X5 и опубликованные на сервере веб-сайта.

 


Лучшая практика:

-

Как использовать веб-шрифты

-

Как скачать шрифт с Fontsquirrel