Знак рубля на сайт на пяти шрифтах: Arial, Georgia, Tahoma, Times и Verdana
Здравствуйте. Давно уже хотел выложить знак рубля в шрифтовом отображении. Сам я пользуюсь упрощенной версией этого плагина (а точнее сборкой шрифтов). Я приведу пример в самом конце. А сейчас разберем какие есть вариации обозначения знака рубля и как подключить эти шрифты к сайту.
Знак Рубля шрифтом Arial
Установка:
1. Залейте папку b-rub_arial в корень сайта
2. Вставьте между тегами <head> следующий код (вы подключите стили)
<link rel="stylesheet" href="b-rub_arial/stylesheet.css">
3. Далее вставляете туда, где нужно отображение знака следующий код:
<span class="b-rub">Р</span>
В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.
Скачать Demo
Знак Рубля шрифтом Georgia
Установка:
1. Залейте папку b-rub_georgia в корень сайта
2. Вставьте между тегами <head> следующий код (вы подключите стили)
<link rel="stylesheet" href="b-rub_georgia/stylesheet.css">
3. Далее вставляете туда, где нужно отображение знака следующий код:
<span class="b-rub">Р</span>
В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.
Скачать Demo
Знак Рубля шрифтом Tahoma
Установка:
1. Залейте папку b-rub_tahoma в корень сайта
2. Вставьте между тегами <head> следующий код (вы подключите стили)
<link rel="stylesheet" href="b-rub_tahoma/stylesheet.css">
3. Далее вставляете туда, где нужно отображение знака следующий код:
<span class="b-rub">Р</span>
В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.
Скачать Demo
Знак Рубля шрифтом Times New Roman
Установка:
1. Залейте папку b-rub_times в корень сайта
2. Вставьте между тегами <head> следующий код (вы подключите стили)
<link rel="stylesheet" href="b-rub_times/stylesheet.css">
3. Далее вставляете туда, где нужно отображение знака следующий код:
<span class="b-rub">Р</span>
В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.
Скачать Demo
Знак Рубля шрифтом Verdana
Установка:
1. Залейте папку b-rub_verdana в корень сайта
2. Вставьте между тегами <head> следующий код (вы подключите стили)
<link rel="stylesheet" href="b-rub_verdana/stylesheet.css">
3. Далее вставляете туда, где нужно отображение знака следующий код:
<span class="b-rub">Р</span>
В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.
Скачать Demo
А вот мой упрощенный вариант знака рубля на сайт
Установка проста:
1. Нужно просто в css файл вставить данный код:
@font-face {
font-family: "ALSRubl-Arial-Bold";
src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff");
font-weight: bold;
font-style: normal;
}
.b-rub {
font-family: "ALSRubl-Arial-Bold";
line-height: normal;
}
2. Далее вставляете туда, где нужно отображение знака следующий код:
<span class="b-rub">Р</span>
Ну вот и все пожалуй. Теперь вы без проблем сможете вставить знак рубля к себе на сайт. Внизу "Демо" идет на страницу со знаком рубля в "Arial", а кнопка "Скачать" отвечает за скачивание всех пяти версий знака. Всего доброго
Комментарии ()