Веб типография в 2011 году

Помните дни, когда вам приходилось хранить часть текста в изображении, потому что ваш графический дизайнер хотел использовать очень редкий шрифт?

Да, даже в конце 2000-х вы могли ориентироваться только на текст в CSS со шрифтом, который присутствовал на компьютере пользователя. Это приводит к указанию все большего количества резервных шрифтов и конечного семейства, из которого можно выбрать шрифт пользователя в случае, если любой другой шрифт недоступен:

font-family: Helvetica, Verdana, sans-serif;

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

На самом деле это функция CSS 2 , но на момент ее появления основные браузеры, такие как Internet Explorer и Netscape, предназначались для различных несовместимых форматов, таких как Embedded Open Type и TrueDoc. Только в последних версиях они начинают поддерживать TTF , наиболее распространенный формат, которым может манипулировать любое типографское программное обеспечение.
В самом простом примере вы связываете URL-адрес, содержащий файл определения шрифта, с символическим именем, которое впоследствии можете использовать в других свойствах:

@font-face {
    font-family: "Prata";
    url("prata.ttf");
}
p {
    font-family: "Prata", sans-serif;
}

Помните, что значения url () в CSS относятся к позиции кода CSS, будь то внешний файл или текущая страница HTML; Вы также можете указать абсолютные URL-адреса.

Плюсы

Преимущество текста в стиле CSS перед его сохранением в изображении несколько:

• поиск и выбор для копирования и вставки.
• Простота обслуживания : изменение текста — это всего лишь изменение нескольких байтов с помощью текстового редактора.
• Применимость других правил CSS, таких как font-size и text-align .
• Доступ к программам чтения с экрана, текстовым браузерам, сканерам и любому другому инструменту, который читает страницу без визуализации ее графического представления.

После загрузки шрифта очень хорошо масштабируется. Это принцип KISS и принцип «отделить контент от презентации».

Служба поддержки

HTML5 Rocks дает нам таблицу совместимости, где мы видим IE 9, Firefox 3.5, версию браузера для Android и iOS, Chrome, Safari и Opera. Проблема в том, что большинство из них, если мы рассмотрим также более старые версии, хотят скачать шрифт в другом формате (TTF, EOT, WOFF, SVG …)

К счастью, у нас есть как минимум два варианта выиграть войну форматов: Font Squirrel и Google Web Fonts .

Font Squirrel — это веб-сервис, который предлагает вам загрузить комплекты @ font-face, содержащие бесплатный шрифт, хранящийся во всех возможных форматах, а также небольшой файл CSS, который вы можете @import в своем. Кроме того, вы можете загрузить имеющийся у вас шрифт и конвертировать его, создав новый набор @ font-face именно для вас.

Подход Google, как всегда, более ориентирован на облако: Google Web Fonts позволяет вам выбрать шрифт, его стили и наборы символов, которые вам нужны; сообщив вам о влиянии на время загрузки страницы, он даст вам:

• элемент <link> .
• @Import инструкция.
• несколько строк JavaScript .

@font-face {
    font-family: 'Prata';
    font-style: normal;
    font-weight: 400;
    src: local('Prata'), local('Prata-Regular'), url('http://themes.googleusercontent.com/static/fonts/prata/v1/Q4MFb6hnPeDYpBc-5E8p_w.woff') format('woff');
}