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

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

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

Пример:

100 ₽
HTML

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

Пример:

100 ₽
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.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
10.12.2022
1268
Предыдущая запись Модальные окна на Fancybox 3
Следующая запись Стилизация input file

Комментарии

, чтобы добавить комментарий.

Другие публикации

Таблица Alt-кодов
Alt-код – метод вставки символа сочетанием нажатой клавиши Alt и числа, набранного на цифровой клавиатуре (Num Lock должен быть включен).
9131
+2
Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
705462
+49
Работа с ценами PHP
Приведение цен к общему типу, форматирование и вывод цен.
12705
+3
Создание товарной накладной в PHPExcel
Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx...
17537
+6
Примеры использования cURL в PHP
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
167175
+20
Горячие клавиши PhpStorm
PhpStorm – среда разработки с интеллектуальным редактором для PHP, HTML и JavaScript, обеспечивает автодополнение кода, анализирует код на лету предотвращая ошибки.
11920
+5