Многие помнят, что еще не так давно российский рубль не имел своего графического символа и чаще всего его обозначали как “р.”. При этом у таких валют, как доллар и евро давно существовали графические знаки для их обозначения и вопрос утверждения такого символа для рубля оставался открытым.
В 2006 году Центральный Банк России наделили полномочиями по утверждению графического изображения рубля и с этого момента различные персоны и дизайнерские компании, в том числе студия Артемия Лебедева стали предлагать свои новые варианты этого символа.

финалисты конкурса
Наиболее популярным и простым был символ в виде буквы Р с перечеркнутой ножкой. Он стал массово использоваться еще до официального утверждения и по результатам голосования, проведенного Центробанком в 2013 году, был официального выбран в качестве международного символа российской валюты.
Ставить российский денежный символ принято после числа.
Как ввести знак с клавиатуры
Просто так одним нажатием клавиши код рубля с клавиатуры пока не напечатать. Код символа в раскладке юникод – U+20BD. Но важно, чтобы используемый шрифт поддерживал этот знак, иначе вы увидите на этом месте в тексте просто квадратик.
Например, в MS Word напечатать знак рубля можно, если ввести “20BD” (без кавычек), а затем нажать клавишу ALT и, удерживая ее нажатой, – клавишу X. Кроме того, можно поставить символ через меню “Вставка – Символ”.
Html код символа рубля
Чтобы добавить обозначение рубля на сайт в html коде нужно указать код:
⃏
Естественно, что шрифт должен содержать в своем составе этот денежный знак.
Приведу работающий пример.
В сервисе Google Fonts можно быстро найти шрифты с поддержкой этого знака. В поле Preview Text указываем код рубля (я скопировал символ из документа Word, куда вставил вышеописанным способом, поскольку так и не нашел универсального приема набрать символ unicode с клавиатуры).
Видно, что нужный нам значок поддерживают шрифты:
- PT Sans (также PT Sans Narrow, PT Sans Caption);
- PT Serif (также PT Serif Caption);
- Roboto (также Roboto Condensed);
- Rubik;
- Istok Web;
- PT Mono;
- Cormorant (также Cormorant Garamond, Cormorant Infant, Cormorant SC, Cormorant Unicase).
Подробно о подключении шрифта с google fonts написано в статье: Использование на сайте шрифтов от Google Fonts.
Применительно к нашему случаю нужно выполнить 3 шага:
1. Подключаем шрифт (помещаем куда нибудь в область header сайта инструкцию).
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" />
2. Задаем этот шрифт для соответствующего элемента.
.rubl { font-family: 'PT Sans', serif; }
3. Вставляем знак рубля как спецсимвол.
<span class="rubl">⃏</span>
Создаем свой знак рубля
В ходе использования такого подхода столкнулся с проблемой, что на некоторых устройствах символ выводится в виде квадратика. В результате нашел универсальный способ вывода знака рубля с помощью буквы Р и подчеркивания, приподнятого до нужного уровня.
Для этого на сайте указываем:
<span class="rub">Р</span>
А в таблицу стилей добавляем следующий код:
.rub { font-family: arial; vertical-align: middle; border-bottom: 1px solid; line-height: 5px; display: inline-block; width: 0.4em; }
Значение line-height определяет, на какой высоте будет находится подчеркивание, а width определит ширину подчеркивания.
Чаще всего символ рубля необходим в расширениях для продажи товаров, таких как WooCommerce. Здесь применимы те же советы, что уже были даны:
- использование шрифта, поддерживающего денежный знак;
- “создание” собственного значка из буквы Р и перечеркивания.
А кто чайник, то можно делать элементарно. Пишем Р, выделяем, нажимаем “зачеркнутый” (Меню Главная-Шрифты). А кто хочет автомата, то заходим Файл – Параметры – Настройка ленты – Клавиши – Все команды – Strikethrough -И назначаем горячую клавишу, например Ctrl+Shift+[ (как я делал, поскольку этот набор свободный) и ФСЁ!
Может потому квадратик и был, что код рубля & # 8 3 8 1 ; (без пробелов)
Раньше символ рубля в некоторых проверенных шрифтах занимал диапазон 8377 – 8399. То есть можно было использовать любой код из этого диапазона. На момент подготовки этой статьи код рубля еще не был утвержден. Как сейчас обстоят дела, не знаю.