Как стать автором
Обновить

Знак рубля на сайте: экспресс-метод

Время на прочтение2 мин
Количество просмотров104K
Знак рубля

Задача


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

Идея


В свободно распространяемых (в том числе для использования в вебе) шрифтах 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; для не утвержденного официально знака.

Сам символ рубля уже есть во многих страндартных гарнитурах. И даже если вы видите ⃏, это не означает, что файл шрифта у других пользователей тоже содержит такой знак.
Теги:
Хабы:
Всего голосов 102: ↑91 и ↓11+80
Комментарии183

Публикации

Истории

Ближайшие события

Конференция HR API 2024
Дата14 – 15 июня
Время10:00 – 18:00
Место
Санкт-ПетербургОнлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область