Размещаем символ рубля на веб-страницах

Способ 1.

С помощью инструмента Font Awesome. Символ рубля входит в набор иконок Font Awesome.

Использовать этот инструмент очень просто: сначала подключаем его к странице. Можно подключить файл стилей из CDN или загрузить его к себе на сайт.

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Теперь можно его использовать. Символ рубля размещается на странице следующим образом:

HTML

<i class="fa fa-rub"></i>

Необязательно использовать HTML-элемент <i>, можно заменить его любым другим на свой вкус, например, элементом <span>. Управлять размером можно путем добавления к элементам CSS-классов fa-2x, fa-3x, fa-4x, или fa-5x. Подробнее об использовании Font Awesome можно почитать на сайте, указанном выше в разделе Get Started.

Способ 2.

С помощью инструмента Web Font Generator на сайте http://www.fontsquirrel.com. За основу нужно взять шрифт, разработанный «Студией Артемия Лебедева». Скачиваем и конвертируем его в разные форматы с помощью Web Font Generator.

Скачать архив со шрифтами.

Затем размещаем полученные шрифты на своем сайте и подключаем их в CSS-файле.

CSS

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

	.rur {font-family: 'rublregular';}

Чтобы вставить символ рубля на страницу, добавляем следующий HTML-код:

HTML

<p>1500 <span class="rur">a</span>

Буква внутри элемента <span>, обозначает каким шрифтом должен быть отображен символ рубля. Ниже представлен список шрифтов и их обозначение.