ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



CSS3 Demonstration. Lesson2 Web fonts

Сообщений 1 страница 2 из 2

1

Второй урок курса "Демонстрация CSS3" будет посвящен шрифтам в web'e и особенностям их использования через правило @font-face.
Долгое время для создание красивой типографики в вебе приходилось пользоваться изображениями или громоздкими javascript-плагинами, с явлением мире CSS3 это стало доступно, просто и красиво =) Хотя есть свои хитрости и тонкости, о которых и пойдет речь в уроке.

Lesson2 Web fonts

На самом деле @font-face появился еще во второй версии CSS, но поддерживался он только браузером Internet Explorer (удивлены, да?), правда для этого создателям пришлось изобрести свой формат Embedded Open Type (.eot), и другие браузеры его конечно же не поддерживали и не поддерживают (а вот это уже не удивительно...).  Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType). Большинство других браузеров поддерживают .ttf или .otf-шрифты.

Это мы возьмем на заметку себе, и пойдем дальше.

Шаг 1. Кроссбраузерный синтаксис.
@font-face относится к так называемым at-правилам, т.е. это ключевые слова (а не селекторы) перед которыми идет знак @ (at). At-правила CSS используются для подключения дополнительных стилей или шрифтов, установки кодировки CSS-файла и многого другого. At-правила лучше подключать в начале css-файла, причем правило @import должно идти перед ВСЕМИ иными правилами. Будьте с этим осторожны подключая шрифты через @font-face.

Использование @font-face состоит из двух частей

// Объявляем шрифт
@font-face {
    font-family: 'Имя шрифта';
    src: url('путь/до/него');
}

// Применяем шрифт
p {
    font-family: 'Имя шрифта';
}

Так было бы в идеале, если бы был 1 браузер. Но их много. Радует, что практически все браузера поддерживают @font-face

http://s3.uploads.ru/t/O3Izi.jpg

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:

Internet Explorer (все версии) — EOT;
http://www.iconsearch.ru/uploads/icons/nuove/16x16/1rightarrow.png   Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
Opera (начиная с 10) — TTF/OTF;
Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
Safari (начиная с 3.2) — TTF/OTF.

Как видим, у нас есть минимум три типа файлов, которые нужно подгружать EOT, TTF и SVG, можно добавить WOFF, чтобы Firefox был доволен.

Существует немало вариантов кроссбраузерного @font-face. Наиболее известный - этот:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?') format('eot'),
         url('myfont-webfont.woff') format('woff'),
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

В font-family необходимо указать имя нашего шрифта, именно так потом можно будет к нему обращаться при применении шрифта.
В src (source - "источник") идет подключение файлов шрифтов. Нужно подключить 4 файла, 4 и подключаем, через запятую.
Обратите внимание, что файл формата EOT стоит первым. Младшие версии IE не понимают запись при подключении нескольких форматов шрифтов, поэтому необходимо данный файл поставить первым и после ссылки добавить вопросительный знак ?, чтобы браузер на этом остановился.
Остальные браузеры поймут данную запись и выберут нужный им шрифт.

На заметку:
Можно также использовать параметр local(), который будет проверять есть ли шрифт на компьютере пользователя и если такого нет, то загрузит его с сервера:

@font-face {
    font-family: 'Имя шрифта';
    src: local('Имя шрифта');
}

Шаг 2. Где взять все эти шрифты?

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

http://www.fontsquirrel.com/fontface/generator

http://s2.uploads.ru/t/oq2gv.jpg

Если воспользоваться настройками Expert, то можно задать необходимые нам шрифты - это 4 уже упомянутых:

http://s2.uploads.ru/t/OJyia.jpg

Дальше остается только загрузить шрифты на сервер и прописать нужные ссылки в правило. К слову, Font Squirrel сгенерирует и само правило, которое будет находиться в css-файле и даже превью для Вашего шрифта.

Шаг 3. Как победить лису?
В последних версиях браузера Firefox из-за того, что разработчики перемудрили с политикой безопасности нет возможности подключить шрифты, расположенные на другом домене.
Грубо говоря, если у Вас сайт имеет адрес http://mysite.ru/, а шрифты имеют ссылки http://uploads.ru/myfont.ttf , то огнелис просто откажется такие шрифты использовать. Особенно это актуально для пользователей mybb и компания, где нет возможность загрузить через опцию "Файлы" файлы шрифтов (точнее можно загрузить только svg, но вот беда - Firefox svg не поддерживает).

Но выход есть.
Возьмем нужный нам шрифт и пойдем с ним на Font Squirrel.
Далее пошагово:

1. Загружаем шрифт.
2. Выбираем настройки Expert
3. Устанавливаем нужные нам файлы, а также в настройке CSS выбираем Base64 Encode

http://s3.uploads.ru/X0nL3.jpg

4. Жмем Download и сохраняем себе на компьютер.
5. Загружаем файлы svg, eot (можно на сторонний хостинг)
6. Открываем файл stylesheet.css в блокноте или хтмл-редакторе и вставляем в нужные места ссылки на svg и eot.
7. Загружаем файл на форум/сторонний хостинг.
8. Экспортируем его в "Своем стиле" после

/* A1.1 */
  @import url(style_cs.css);

@import url(ссылка на файл);

9. Profit! Лиса побеждена.

Шаг 4. Альтернативы
На данный момент альтернатива одна - Google web fonts Гугл предлагает сервис по работе со шрифтами.
Использовать Google web fonts очень просто. Кликаем Quick-use у понравившегося шрифта, в открывшейся вкладке находим такой код

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

Можно вставить его в хтмл-верх на страницу, а можно импортировать, как мы делали это раньше, используя ссылку (выделена жирным)

+ Не надо никуда ничего грузить и ничего писать - выбрал шрифт, добавил ссылку и готово.
- Шрифтов мало (на сейчас 613) и они в основном латиница.


О гадостях на последок...

Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей. Причем неважно как Вы этот шрифт зададите - через @font-face или Google web fonts - работать не будет.

Отредактировано sadhaka (25.12.2012 20:22:00)

+2

2

Спасибо за статья, очень полезная и самая нужная

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."