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

Объявление

Акция! Дизайн «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:

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



Теги: fonts, шрифты, @font-face, Google web fonts, CSS3, CSS

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

+2

2

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

0



Рейтинг форумов | Создать форум бесплатно © 2007–2019 «QuadroSystems» LLC