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

    Задача

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

Идея

В свободно распространяемых (в том числе для использования в вебе) шрифтах 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 знак рубля располагается под всеми символами с кодами от ₹ до ⃏. Дело в том, что на момент создания шрифта символы диапазона 20B9—20CF были свободны. И так как официально знак рубля в юникоде отсутствует, авторы разместили знак рубля сразу в 22 «ячейках».

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

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