Красивый шрифт на сайте
Не хочу сказать, что мне надоели стандартные шрифты. Просто Arial, Verdana, Times New Roman настолько приелись глазам за пару десятков лет, что хочется чего-то свеженького — по крайней мере браузеры стали это позволять 🙂 Конечно, кое-где с этим делом перебарщивают. Но, если всё это грамотно и со вкусом сочетать, это здорово освежит сайт.
Содержание
Конечно, все браузеры понимают нестандартные шрифты, но каждый понимает как правило по своему. Вот перечень браузеров и шрифтов к ним:
- Любая версия Internet Explorer понимает шрифт типа — EOT;
- Firefox начиная с версии 3.5 понимает – TTF и OTF, а с версии 3.6 научился понимать WOFF;
- Opera, начиная с 10 версии, работает с — TTF и OTF шрифтами;
- Все версии GoogleChrome понимают SVG шрифты, но в 2010 научился читать всеми любимые TTF и OTF;
- В Safari, начиная с версии 3.2, работает с TTF и OTF шрифтами.
Google Web Fonts
Самый простой способ воспользоваться сервисом Google Web Fonts. Как всем известно, гуглы плохого не делают 🙂 , достаточно выбрать нужные шрифты и встроить в сайт аж тремя способами:
- Через элемент
‹link›. Строка будет иметь примерно следующий вид.
1<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic' rel='stylesheet' type='text/css'> - Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.
1@import url(http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic); - Через JavaScript.
Просто и со вкусом. Все шрифты для разных версий браузеров определяются и встраиваются автоматически.
Font Converter
Это второй, чуть более сложный способ встраивания шрифтов.
Выше мы уже выяснили, что но нам нужно иметь шрифт во всех форматах TTF OTF WOFF SVG и EOT, чтобы он корректно отображался во всех браузерах. Если шрифт во все форматах есть, то все хорошо, если нет, то тоже все хорошо 🙂 . Идем на сайт и конвертируем в недостающие форматы:
- Online Font Converter — ресурс попроще;
- Webfont Generator — ресурс посложнее, но и с бо́льшими возможностями.
Рассмотрим работу с Webfont Generator подробнее:
- Добавляем свой шрифт или шрифты и выбираем режим Expert. Можем выбрать форматы шрифтов — рекомендую оставить всё, как есть — это работает, по крайней мере, на всех современных версиях браузеров.
- Выбираем Custom Subsetting. Это нужно для того, чтобы выбрать именно те диапазоны символов, которые нам нужны. А нужны нам, скорее всего, English и Cyrillic. Также я добавляю то, что на скриншоте — в действительности никогда не знаешь, какие ещё символы смогут понадобиться, а повторять эту процедуру по второму разу (вместе с интеграцией) не особенно хочется.
- Мы можем встроить свои шрифты прямо в CSS при помощи Base64 Encode (все современные браузеры поддерживают этот финт ушами). Это позитивным образом скажется на снижении нагрузки на сервер (уменьшится количество обращений к нему), а также на скорости загрузки страниц.
Также можно изменить имя получаемой CSS и добавить ещё всяких опций, раздувающих размер файла и на практике не особо нужных. Остальное не трогаем — оно того не стоит.
Лжём о том, что этот шрифт невозбранно разрешается использовать в интернете и получаем zip-файлик.
- Открываем архив. В нём мы увидим файл «имяшрифта-demo.html» — открываем и видим красивую табличку со своими шрифтами. Для проверки нашей кириллицы переходим на Glyphs & Languages, листаем ближе к концу страницы.
- И последним шагом интегрируем шрифт в CSS сайта, например:
12345678910@font-face{font-family: 'MyWebFont';src: url('WebFont.eot');src: url('WebFont.eot?#iefix') format('embedded-opentype'),url('WebFont.woff') format('woff'),url('WebFont.ttf') format('truetype'),url('WebFont.svg#webfont') format('svg');font-weight: normal;font-style: normal;}
