Символ рубля при помощи CSS

Добрый времени суток.

После вступления закона о знаке рубля на международном валютном рынке, многие из клиентов изъявили желание поставить в свои магазины именно знак рубля, а не «руб.».

Поискав в интернете я не нашел еще спецсимвола html (хотя нашел даже спецсимвол гривны Украины). Но мне гугл предложил пару вариантов:

1) Подключение шрифтов гугл. Вариант неплохой, но подключать на сайт шриф только для того, чтобы поставить знак рубля бред. Если уж и подключать шрифт, то использовать его надо по полной. А так только лишняя нагрузка.

2) Поставить картинку. Это вообще не вариант. Заходя со слабым трафиком каждая картинка на счету.

Ну и третий вариант — сделать все через CSS. Не скажу что это хороший способ, но как вариант. Тем более можно сделать знак под шрифт сайта.


<source lang="css">
.rub{
display: inline-block;
font-size: 24px;
line-height: 7px;
border-bottom: 1px solid #000000;
}
</source>


<div class='rub'>P</div>


Т.е. способ решается простой регулировкой высоты. Делаем подчеркивание и сдвигаем его выше на нужный нам уровень.

Решать вам как поступать. Надеюсь, что в следующих обновлениях выйдет наш долгожданный спецсимвол и мы не будем больше извращаться.

Автор: aice19

Источник ^[1]