Знак рубля для HTML

Информация о материале: Категория: HTML, CSS, javascript, PHP; Опубликовано: 26 октября 2013

Студией Артема Лебедева создан шрифт со знаком рубля.

Чтобы использовать его на локальном компьютере - устанвливаем шрифт. Шрифт есть в двух форматах - rouble.ttf ("Трутайп") или rouble.otf ("Оупентайп")

В этом файле есть начертания символа для различных шрифтов:

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 Bold Italic
o - Lucida Regular
p - Verdana Regular
q - Verdana Italic
r - Verdana Bold
s - Verdana Bold Italic

То есть, если мы напишем английскую букву шрифтом AlsRubl, то знак рубля будет соответствовать шрифту Arial Regular.

Выглядет это так:

Теперь воспользуемся сервисом Font Squirrel для генерации файлов шрифта для самых распространенных браузеров. См. как это делается.

В данном случае со шрифтом rouble в генераторе шрифтов нужно использовать такие настройки:

Expert
Custom
Subsetting
Unicode Ranges:0061-0073

Нажимае загрузить и получаем вот такой архив со шрифтом, который теперь можно использовать на сайте.

Что теперь с этим архивом делать... Можно, например, в папке шаблона Joomla создать папку fonts и загрузить туда 4 файла:

rouble-webfont.eot
rouble-webfont.woff
rouble-webfont.ttf'
rouble-webfont.svg

А в файл с css кодом добавить определение шрифта:

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

Теперь, чтобы в тексте html страницы отобразить знак рубля делаем так:

<span style="font-family:als_rublregular;">a</span>

Вместо английской буквы a в тексте страницы мы увидим знак рубля для шрифта Arial.

Думаю, лучше будет определить класс для знака рубля:

.rubl{font-family:als_rublregular;}

и использовать в тэге span не атрибут style, а class:

<span class="rubl">a</span>

HTML, CSS, javascript, PHP

Знак рубля для HTML