Современный дизайн часто требует использования на сайте нестандартных шрифтов. Есть несколько основных способов сделать это кроссбраузерно (отображаться одинаково в разных браузерах):
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 и
@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. Сгенерировать кроссбраузерный набор шрифтов можно с помощью этого онлайн инструмента.