Кроссбраузерные шрифты

  1. Главная
  2. Блог
  3. Разработка
  4. Кроссбраузерные шрифты

Современный дизайн часто требует использования на сайте нестандартных шрифтов. Есть несколько основных способов сделать это кроссбраузерно (отображаться одинаково в разных браузерах):
1) Для небольшого по объему статичного текста, например в логотипе, навигационном меню и других элементах сайта, лучше всего использовать картинки, если это не противоречит интересам сео. В таком случае шрифт гарантированно будет выглядеть одинаково в любом браузере (возможны лишь проблемы с полупрозрачными картинками в формате PNG для некоторых браузеров).
2) Для небольшого количества динамического текста, например в меню или на скидочном купоне, возможны несколько вариантов. Для отрисовки текста поверх картинки чаще всего используется php библиотека gd:

imagettftext($im, $size, $angle, $imgX, $imgY, $color, $font, $imgText);
/*
 * $im - ресурс изображения; 
 * $size - размер шрифта; 
 * $angle - угол поворота в градусах; 
 * $imgX, $imgY - координаты для первой буквы текста; 
 * $color - индекс цвета, 
 * $font - ссылка на шрифт в формате ttf; 
 * $imgText - текст надписи;
*/

Для случаев, когда не требуется "вшивать" текст в картинку можно использовать одну из javascript библиотек: sIFR, cufon, typefaces.js (основные отличия библиотек: sIFR - использует flash, cufon, typefaces.js - используются JavaScript, SVG и или VML для IE). Способ предоставляет неплохое кроссбраузерное решение, но не стоит использовать его для форматирования больших объемов текста. 3) Для больших объемов текста лучше всего подходят подключаемые шрифты - css правило @font-face. Метод работает для большинства браузеров (в т.ч. IE 6+). Рассмотрим пример подключения шрифта pt sans для сайта:

@font-face {
 font-family: 'pt_sans';
 src: url('fonts/PTS76F-webfont.eot');
 src: url('fonts/PTS76F-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/PTS76F-webfont.woff') format('woff'), url('fonts/PTS76F-webfont.ttf') format('truetype'), url('fonts/PTS76F-webfont.svg#pt_sansbold_italic') format('svg');
 font-weight: bold;
 font-style: italic;
}

@font-face {
 font-family: 'pt_sans';
 src: url('fonts/PTS56F-webfont.eot');
 src: url('fonts/PTS56F-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/PTS56F-webfont.woff') format('woff'), url('fonts/PTS56F-webfont.ttf') format('truetype'), url('fonts/PTS56F-webfont.svg#pt_sansitalic') format('svg');
 font-weight: normal;
 font-style: italic;
}

@font-face {
 font-family: 'pt_sans';
 src: url('fonts/PTS55F-webfont.eot');
 src: url('fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/PTS55F-webfont.woff') format('woff'), url('fonts/PTS55F-webfont.ttf') format('truetype'), url('fonts/PTS55F-webfont.svg#pt_sansregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

CSS правило выше определяет подключаемый шрифт и несколько правил его начертания (стандартное, наклонное, жирное и жирное-наклонное). Для их поддержки в разных браузерах подключаются разные форматы - .eot, .woff,.ttf,.svg. После подключения нестандартных шрифтов на сайте - их можно использовать в css как нативные. Только не забудьте проверить корректность их отображения и на всякий случай указать после основного шрифта несколько стандартных (наиболее похожих по начертанию).

.classname {
font-family: pt_sans, Tahoma, Arial, sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

На заметку: Некоторые даже стандартные шрифты могут немного по разному отображаются в Windows и Mac os, например Tahoma или Arial. Сгенерировать кроссбраузерный набор шрифтов можно с помощью этого онлайн инструмента.

Понравилось? Репост!