Многие помнят, что еще не так давно российский рубль не имел своего графического символа и чаще всего его обозначали как «р.». При этом у таких валют, как доллар и евро давно существовали графические знаки для их обозначения и вопрос утверждения такого символа для рубля оставался открытым.
В 2006 году Центральный Банк России наделили полномочиями по утверждению графического изображения рубля и с этого момента различные персоны и дизайнерские компании, в том числе студия Артемия Лебедева стали предлагать свои новые варианты этого символа.
Наиболее популярным и простым был символ в виде буквы Р с перечеркнутой ножкой. Он стал массово использоваться еще до официального утверждения и по результатам голосования, проведенного Центробанком в 2013 году, был официального выбран в качестве международного символа российской валюты.
Ставить российский денежный символ принято после числа.
Как ввести знак с клавиатуры
Просто так одним нажатием клавиши код рубля с клавиатуры пока не напечатать. Код символа в раскладке юникод — U+20BD. Но важно, чтобы используемый шрифт поддерживал этот знак, иначе вы увидите на этом месте в тексте просто квадратик.
Например, в MS Word напечатать знак рубля можно, если ввести «20BD» (без кавычек), а затем нажать клавишу ALT и, удерживая ее нажатой, – клавишу X. Кроме того, можно поставить символ через меню «Вставка — Символ».
Html код символа рубля
Чтобы добавить обозначение рубля на сайт в html коде нужно указать код:
1 |
⃏ |
Естественно, что шрифт должен содержать в своем составе этот денежный знак.
Приведу работающий пример.
В сервисе 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 сайта инструкцию).
1 |
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" /> |
2. Задаем этот шрифт для соответствующего элемента.
1 2 3 |
.rubl { font-family: 'PT Sans', serif; } |
3. Вставляем знак рубля как спецсимвол.
1 |
<span class="rubl">⃏</span> |
Создаем свой знак рубля
В ходе использования такого подхода столкнулся с проблемой, что на некоторых устройствах символ выводится в виде квадратика. В результате нашел универсальный способ вывода знака рубля с помощью буквы Р и подчеркивания, приподнятого до нужного уровня.
Для этого на сайте указываем:
1 |
<span class="rub">Р</span> |
А в таблицу стилей добавляем следующий код:
1 2 3 4 5 6 7 8 |
.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. То есть можно было использовать любой код из этого диапазона. На момент подготовки этой статьи код рубля еще не был утвержден. Как сейчас обстоят дела, не знаю.