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

28 декабря 2013  20690  символы, CSS, Шрифты, верстка

 

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

В 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.
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

Цена — 150 e

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

Скачать web-font-rouble (zip)

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

Источники:
http://www.artlebedev.ru/kovodstvo/sections/159/#12
http://artgorbunov.ru/bb/soviet/20120223/

 

Комментарии для сайта Cackle
наверх