Значок рубля для сайта

Значок рубля для сайта Как без лишней головной боли начать использовать знак рубля на сайте.
Знак рубля

    Задача


    Без лишней головной боли начать использовать знак рубля на сайте.

Идея


В свободно распространяемых (в том числе для использования в вебе) шрифтах PT Sans и PT Serif среди символов есть и знак рубля. Если использовать эти шрифты на сайте, то для решения задачи можно обойтись без лишнего html-кода, css-бубнов, векторной графики и прочих джедайских извращений.


Гугл в помощь


У Google есть вроде как замечательный сервис Web Fonts, позволяющий очень просто и легально использовать шрифты на веб-страницах. Кириллических шрифтов там не так уж и много, но нужные нам PT Sans и PT Serif есть. При этом для каждого браузера Гугл отдает свой css-код и нужный формат файла шрифта.

Делается это до безобразия просто:

1. Подключаем css-файл c нужным нам шрифтом:
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic"
rel="stylesheet" type="text/css" />

2. Задаем для элементов соответсвующий font-face:
.price {
  font-family: 'PT Sans', serif;
  }

3. Вставляем знак рубля как спецсимвол:
<span class="price">999 &#8399;</span>


В чем подвох?


Для Internet Explorer Гугл из вредности генерирует файлы, в которых отсутствует некоторые дополнительные символы, в том числе и нужный нам знак рубля.

Поэтому ничего не остается, как пойти на Fontsquirrel и скачать полный @font-face Kit нужного нам шрифта (нужно выбрать набор не Cyrillic Subset, а Don't Subset — то есть содержащий все символы).

Подключение шрифта при этом способе занимает чуть больше времени, зато так мы покрываем весь зоопарк браузеров.

Демо

Мораль


Если Google Fonts API выйдет из бета-версии (хотя мы говорим «Гугл», подразумеваем «бета») и начнет отдавать полные наборы символов для всех браузеров, это будет самым удобным способом использовать знак рубля на сайте. А пока без Шрифтобелки не обойтись.

Лирический довесок


В шрифтах PT Sans и PT Serif знак рубля располагается под всеми символами с кодами от &#8377; до &#8399;. Дело в том, что на момент создания шрифта символы диапазона 20B9—20CF были свободны. И так как официально знак рубля в юникоде отсутствует, авторы разместили знак рубля сразу в 22 «ячейках».

Однако в Юникоде версии 6.0 место U+20B9 было отдано официальному знаку индийской рупии. Поэтому, я рекомендую использовать самый «дальний» код &#8399; для не утвержденного официально знака.

Сам символ рубля уже есть во многих страндартных гарнитурах. И даже если вы видите ⃏, это не означает, что файл шрифта у других пользователей тоже содержит такой знак.
Источник: habrahabr.ru

dlrm
Разработчик на джумле, автор многих идей проектов.

Вы можете почитать все статьи от dlrm'а.



Другие статьи по этой теме:
Комментарии (2)     Подпишитесь на RSS комментариев к этой статье.

2 комментариев

#1022
Platon007 говорит:
November 2, 2013 at 02:05 am
Чо-то ваще нифига. Ни Хром, ни опера. никто не показывает символы. ни в демо, ни в проделанном по описаном шагам html файле.
#1109
Масeee говорит:
March 6, 2014 at 10:07 pm

ք

&#x584

Работает у меня на сайте

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.