Кроссбраузерный значок рубля на CSS
Как известно из различных источников, в недалеком 2013-м году рубль, как и многие другие валюты, обзавелся собственным символом.
Знак рубля уже внедрили в некоторые шрифты и в HTML-разметку. В HTML, кстати говоря, код символа:
₽ или
₽ Многие интернет-магазины, да и прочие сайты, связанные с денежными операциями, активно заменяют привычное «Руб», «RUB» и «р.» на новый знак рубля. Но есть одна проблема – не на каждом компьютере существует этот символ, и вместо символа рубля мы наблюдаем следующее:
И такая картина может быть у большинства ваших клиентов. А исправлять это нужно как можно скорее, ведь без присутствия соответствующего знака валюты мы вводим в заблуждение ваших покупателей и, тем самым, теряем драгоценных клиентов.
Сегодня я покажу вам, как с помощью стандартной буквы «Р» и CSS можно получить значок рубля, который будет отображаться на всех устройствах правильно, как это и должно быть.
1. Итак, первое, что нам необходимо сделать, это обернуть нашу букву в тег span:
<span class="rub">Р</span>2. Затем напишем для нее небольшой стиль:
.rub {
line-height: 5px;
width: 0.4em;
border-bottom: 1px solid #000;
display: inline-block;
} Сохраняем и смотрим, что у нас получилось:
По-моему – очень неплохо. По желанию можете изменить размеры горизонтальной полосы, ее цвет и положение относительно буквы «Р».
