Красивый шрифт на сайте

tux 2013.10.03 Веб-дизайн https://tux.org.ua/?p=2048 5590 0

Не хочу сказать, что мне надоели стандартные шрифты. Просто 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›. Строка будет иметь примерно следующий вид.

XHTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

1

<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic);

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 сайта, например:

@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;
}

@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;

}

Лично я в 90% случаев использую Font Squirrel @font-face Generator, но, если вы задаётесь вопросом «как встроить Open Sans на свою страницу» (как на этом сайте 🙂 ) — не парьтесь и используйте Google WebFonts.

css, webfonts, веб-дизайн

Падающий снег на HTML5 Canvas

Цвета HTML

#:

Красивый шрифт на сайте

Содержание

Google Web Fonts

Font Converter

Похожие материалы:

Оставить комментарий