Знак рубля в HTML/CSS

10.12.2022

45355

Во многих шрифтах уже есть символ рубля, достаточно вставить символ «₽».

Его можно ввести с клавиатуры Alt-кодом: в Windows Alt + 8, в MacOS Alt + Р (в русской раскладке).

Пример:

100 ₽

HTML

Вставка через код символа

В юникоде знак рубля имеет код \u20bd, HTML-код – ₽.

Пример:

100 &#8381;

HTML

Вывод знака рубля через CSS

Знак рубля можно вывести c помощью CSS-кода – \20BD и псевдо свойства :after.

Пример:

<div class="price">100</div>

HTML

.price:after {
	content: ' \20BD';
}

CSS

Добавление черточки к букве Р

100 <span class="rub">Р</span>

HTML

.rub {
	font-family: arial;
	vertical-align: middle;
	border-bottom: 0.07em solid;
	line-height: 0.2em;
	display: inline-block;
	width: 0.5em;
}

CSS

Результат:

Шрифт rouble

Вариант предложенный студией Артемия Лебедева шрифт «rouble», где буквы соответствуют шрифтам, в стиле которых нарисованы знаки рубля.

Скачать шрифт rouble.zip

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

Пример использования:

100 <span class="rouble">r</span>

HTML

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

.rouble{
	font-family:'rouble';
	font-weight: normal;
	font-style: normal;
}

CSS