Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

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


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Справочная » Web-шрифты на форуме через правило @font-face


Web-шрифты на форуме через правило @font-face

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

1

Долгое время для создание красивой типографики в вебе приходилось пользоваться изображениями или громоздкими 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-файле и даже превью для Вашего шрифта.

Не забудьте про кириллицу!

Не забудьте в графе "Subsetting:" установить  "Custom Subsetting..." и добавить в список Кириллицу. На скрине ниже так же выбраны все дополнительные символы (пунктуация, капс, альт-символы и т.д.), по принципу лучше перестраховаться: если симовлы невозможно будет сгенерировать, то их просто не добавят в таблицу:
http://s6.uploads.ru/R8eoh.jpg

Шаг 3. Как победить лису?
Лиса побеждена сервисом.  С 12.04.2015 можно загружать все файлы шрифтов.

Неактуально

В последних версиях браузера 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 - работать не будет.

Важно...
** В последних версиях браузера Firefox из-за того, что разработчики перемудрили с политикой безопасности нет возможности подключить шрифты, расположенные на другом домене. Кроме варианта с base64, можно перехитрить лису таким способом:
1) переименовываем файл мой_шрифт.woff в мой_шрифт.svg
2) загружаем измененный файл на форум (через администрирование, файлы)
3) вставляем ссылку на файл вместо woff  в правило, вот так:
url('http://watahw.f-rpg.ru/files/0013/ab/ad/79755.svg') format('woff')
(обратите внимание, что оставляем формат woff  в скобках)
Таким образом файл шрифта для FF загружен на ваш форум, а значит Мозилла будет отображать этот шрифт.

© sadhaka, специально для qssuport.ru. перепечатка со ссылкой приветствуется)

0

2

Обратите внимание, что в приведенных примерах в Мозилле на вашем форуме не будет отображаться подключаемый шрифт, пока вы не перезагрузите файл woff  в формате svg к себе на форум!

Пример использования веб-шрифтов с помощью Google Fonts:

Marck Script cursive

http://s7.uploads.ru/t/8rz6p.jpg

1. Устанавливаем выбранный шрифт на сайт (в html-верх):

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


2. Примененяем к конкретному элементу:

#pun-navlinks {
    font-family: 'Marck Script',cursive;
}

Результат (салатовым выделен шрифт):
http://s7.uploads.ru/LhiBU.jpg
ДЕМО

0

3

Ds Moster
http://s6.uploads.ru/t/fqCQp.jpg

Скрин:
http://s6.uploads.ru/PvQVl.jpg

Загруженный стиль:

@font-face {
    font-family: 'ds moster';
     src: url('https://sites.google.com/site/watahw/ds_moster-webfont.eot');
    src: url('https://sites.google.com/site/watahw/ds_moster-webfont.eot?#iefix') format('embedded-opentype'),
local('ds moster'),
         url('http://watahw.f-rpg.ru/files/0013/ab/ad/58143.svg') format('woff'),
         url('https://sites.google.com/site/watahw/ds_moster-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

Применяем к конкретному элементу:

#pun-index .tcl h3 a {
    font-family: 'ds moster';
    font-size: 18px;
}

0

4

  Pt Sans
http://s6.uploads.ru/t/fFBw0.jpg

Загруженный стиль:

@font-face {
        font-family: 'pt_sans';
        src: local('pt_sans');
        src: url('https://sites.google.com/site/watahw/pt_sans-web-regular-webfont.eot');
        src: url('https://sites.google.com/site/watahw/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('https://sites.google.com/site/watahw/pt_sans-web-regular-webfont.woff') format('woff'),
             url('https://sites.google.com/site/watahw/pt_sans-web-regular-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }


Импорт:

/* A1.1 */
@import url(style_cs.css);
@import url(http://co.forum4.ru/files/0012/69/54/46499.css);


Применение:

.punbb .post-box {
    font-size: 17px;
    font-family: 'pt_sans';
}


Результат:
http://s6.uploads.ru/t/XY8eN.jpg

0

5

Aquarelle
http://s7.uploads.ru/t/VPq6X.jpg

Загружаемый стиль:

@font-face {
    font-family: 'aquarelleregular';
    src: url('http://sites.google.com/site/watahw/aquarelle-webfont.eot');
    src: url('http://sites.google.com/site/watahw/aquarelle-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://watahw.f-rpg.ru/files/0013/ab/ad/67215.svg') format('woff'),
         url('http://sites.google.com/site/watahw/aquarelle-webfont.ttf') format('truetype'),
         url('http://sites.google.com/site/watahw/aquarelle-webfont.svg#aquarelleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


Импорт:

/* A1.1 */
  @import url(style_cs.css);
@import url(http://watahw.f-rpg.ru/files/0013/ab/ad/63617.css);


Применяем к конкретному элементу:

#pun-announcement h2 span {
    font-family: 'aquarelleregular';
    font-size: 40px;
}


Результат:
http://s8.uploads.ru/t/NJAnd.jpg

0

6

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

Отредактировано shapatan (23.04.2015 09:51:30)

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Справочная » Web-шрифты на форуме через правило @font-face


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