Матвей Земсков

Заметки веб-мастера

Воскресенье, 02 ноября 2014 16:16

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

Оцените материал
(4 голосов)

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

Способ 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>, обозначает каким шрифтом должен быть отображен символ рубля. Ниже представлен список шрифтов и их обозначение.

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

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: