Как установить на сайт знак рубля

28/12/2013  CSS, Шрифты, символы, верстка, веб-разработка

В декабре 2013 года Банк России утвердил графическое обозначение рубля (символ рубля) в виде прописной буквы «Р» кириллического алфавита, дополненной в нижней части горизонтальной чертой.

Как установить рубль e на сайт

Рассмотрим два варианта: шрифт рубля и символ рубля.

Шрифт рубля

В 2009 году студией Артемия Лебедева был создан шрифтовой файл символа рубля.

Скачать web-шрифт рубля (zip)

Распаковываем архив и загружаем файлы rouble-webfont.eot, rouble-webfont.ttf и rouble-webfont.woff в папку, например — [font]. В файл стилей (css) добавляем правило @font-face для настройки шрифта рубля, указываем пути к файлам шрифта и прописываем шрифт для класса rouble.

Например, файлы расположены в папке [font].

@font-face {
  font-family: 'rouble';
  src: url('/font/rouble-webfont.eot');
  src: url('/font/rouble-webfont.eot?#iefix') format('embedded-opentype'),
       url('/font/rouble-webfont.woff') format('woff'),
       url('/font/rouble-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.rouble {
  font-family: 'rouble';
}

Чтобы установить знак рубля, нужно заключить буквенное обозначение (в зависимости от используемого шрифта) в тег span класса rouble.

Цена — 150 e

<p>Цена — 150 <span class="rouble">e</span></p>
или

Цена — 26 700 b

<p>Цена — 26 700 <span class="rouble">b</span></p>

a — Arial Regular
b — Arial Italic
c — Arial Bold
d — Arial Bold Italic
e — Georgia Regular
f — Georgia Italic
g — Georgia Bold
h — Georgia Bold Italic
i — Tahoma Regular
j — Tahoma Bold
k — Times Regular
l — Times Italic
m — Times Bold
n — Times BoldItalic
o — Lucida Sans
p — Lucida Sans Bold
q — Verdana Regular
r — Verdana Italic
s — Verdana Bold
t — Verdana Bold Italic
u — Futura
v — Trump Mediaeval
w — ITC Studio Script

Символ рубля Юникод

Символ или знак российского рубля (₽) — типографский символ стандарта Юникод.

Юникод U+20BD
HTML-код — ₽ (&#8381;) или ₽ (&#x20bd;)

Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх