Символ рубля html

Выводим знак рубля на сайте

Многие помнят, что еще не так давно российский рубль не имел своего графического символа и чаще всего его обозначали как “р.”. При этом у таких валют, как доллар и евро давно существовали графические знаки для их обозначения и вопрос утверждения такого символа для рубля оставался открытым.

В 2006 году Центральный Банк России наделили полномочиями по утверждению графического изображения рубля и с этого момента различные персоны и дизайнерские компании, в том числе студия Артемия Лебедева стали предлагать свои новые варианты этого символа.

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

Ставить российский денежный символ принято после числа.

Как ввести знак с клавиатуры

Просто так одним нажатием клавиши код рубля с клавиатуры пока не напечатать. Код символа в раскладке юникод – U+20BD. Но важно, чтобы используемый шрифт поддерживал этот знак, иначе вы увидите на этом месте в тексте просто квадратик.

Например, в MS Word напечатать знак рубля можно, если ввести “20BD” (без кавычек), а затем нажать клавишу ALT и, удерживая ее нажатой, – клавишу X. Кроме того, можно поставить символ через меню “Вставка – Символ”.

Html код символа рубля

Чтобы добавить обозначение рубля на сайт в html коде нужно указать код:

Естественно, что шрифт должен содержать в своем составе этот денежный знак.

Приведу работающий пример.

В сервисе Google Fonts можно быстро найти шрифты с поддержкой этого знака. В поле Preview Text указываем код рубля (я скопировал символ из документа Word, куда вставил вышеописанным способом, поскольку так и не нашел универсального приема набрать символ unicode с клавиатуры).

Видно, что нужный нам значок поддерживают шрифты:

PT Sans (также PT Sans Narrow, PT Sans Caption);
PT Serif (также PT Serif Caption);
Roboto (также Roboto Condensed);
Rubik;
Istok Web;
PT Mono;
Cormorant (также Cormorant Garamond, Cormorant Infant, Cormorant SC, Cormorant Unicase).

Читать еще: Выдает ошибку 0xc0000142

Подробно о подключении шрифта с google fonts написано в статье: Использование на сайте шрифтов от Google Fonts.

Применительно к нашему случаю нужно выполнить 3 шага:

1. Подключаем шрифт (помещаем куда нибудь в область header сайта инструкцию).

Знак рубля в HTML

8 августа 2007

Внедрить знак рубля.

	Задача.

1 августа студия пригласила профессиональных дизайнеров начать использовать новый знак рубля. Впервые в офлайне он применен на ценниках студийного «Пункта сбыта мечт». Варианты применения в интернете предлагаются ниже.

Пока новый символ не включен в таблицы ISO и Unicode и отсутствует на компьютерах пользователей, приходится искать способы его отображения. Важно, чтобы он был масштабируемым. Необходимо также подумать об устройствах чтения с экрана и о том, что окажется в буфере обмена у пользователя, копирующего цены. Возможные решения: Flash, PNG, GIF и HTML.

Минусы флеша очевидны: у пользователя может не быть проигрывателя, фокус с текста перемещается в объект при клике, сложно изменить цвет знака.

Работая с изображениями мы сталкиваемся с пределами масштабирования, фиксированной цветовой гаммой, игнорированием поисковиками и привязкой к графике.

Решение с картинкой может быть следующим (обозначение «руб» скрыто и попадет в буфер обмена при копировании):

Кролики по 100 руб.

От некоторых проблем избавит формат SVG. Это вектор, размер файла небольшой, через CSS мы можем свободно управлять цветом символа. Большой минус — необходимость внедрения объектов в текст. Пример ниже не работает в MSIE.

Кролики по 100 руб.

Если отбросить варианты с картинками, первое решение, лежащее на поверхности, — перечеркнутый текст. К сожалению, результат в MSIE ужасен. Существующие на данный момент средства CSS не дают нам возможности свободно управлять положением горизонтальной линии.

Кролики по 100 p уб.

Если стандартную черту нельзя подвинуть, можно нарисовать свою. Допустим, бордером. Толщина линии в примере хорошо подходит для Firefox, но недостаточна для отображения в браузере Opera. Результат слишком непредсказуем.

Кролики по 100 p .

Обратимся к таблицам символов. Совместим короткое тире с буквой «Р». Внедрив – через таблицы стилей, мы можем управлять его отображением при различных режимах вывода. Результат лучше, но при изменении размеров шрифта черта прыгает. Особенно в MSIE.

Кролики по 100 p уб.

В армянском алфавите существует достаточно близкий к знаку символ. Хм, тоже вариант. Пользователи Mac OS X увидят несколько отдаленное от оригинала начертание (и лишь в том случае, если поставили Additional Fonts). Но все-таки слишком бросается в глаза, что буква строчная.

Кролики по 100 ք руб.

Если символа нет на компьютере пользователя, то может быть стоит его туда загрузить? К сожалению, свойство font-face (CSS 2.0), не включено в CSS 2.1. Но браузер, поддерживающий загрузку шрифтов, существует — это Internet Explorer. Только он отобразит знак ниже. Остальные браузеры покажут «руб». Создав односимвольный шрифт со знаком рубля, привязанным к букве «р», мы получаем лучшее решение для пользователей MSIE.

Для просмотра этого примера необходим IE.

Кролики по 100 p уб.

Для пользователей остальных браузеров пока остается использовать короткое тире или картинки. Последний пример сочетает в себе все достоинства перечисленных методов.

Знак рубля на сайт на пяти шрифтах: Arial, Georgia, Tahoma, Times и Verdana

Здравствуйте. Давно уже хотел выложить знак рубля в шрифтовом отображении. Сам я пользуюсь упрощенной версией этого плагина (а точнее сборкой шрифтов). Я приведу пример в самом конце. А сейчас разберем какие есть вариации обозначения знака рубля и как подключить эти шрифты к сайту.

Знак Рубля шрифтом Arial

Установка:

1. Залейте папку b-rub_arial в корень сайта

2. Вставьте между тегами следующий код (вы подключите стили)

3. Далее вставляете туда, где нужно отображение знака следующий код:

В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.

Знак Рубля шрифтом Georgia

Установка:

1. Залейте папку b-rub_georgia в корень сайта

2. Вставьте между тегами следующий код (вы подключите стили)

3. Далее вставляете туда, где нужно отображение знака следующий код:

В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.

Знак Рубля шрифтом Tahoma

Установка:

1. Залейте папку b-rub_tahoma в корень сайта

2. Вставьте между тегами следующий код (вы подключите стили)

3. Далее вставляете туда, где нужно отображение знака следующий код:

В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.

Знак Рубля шрифтом Times New Roman

Установка:

1. Залейте папку b-rub_times в корень сайта

2. Вставьте между тегами следующий код (вы подключите стили)

3. Далее вставляете туда, где нужно отображение знака следующий код:

В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.

Знак Рубля шрифтом Verdana

Установка:

1. Залейте папку b-rub_verdana в корень сайта

2. Вставьте между тегами следующий код (вы подключите стили)

3. Далее вставляете туда, где нужно отображение знака следующий код:

В файле test.html вы можете наглядно посмотреть знак в разных вариациях (жирный, курсивный) и с разным кеглем.

А вот мой упрощенный вариант знака рубля на сайт

Установка проста:

1. Нужно просто в css файл вставить данный код:

2. Далее вставляете туда, где нужно отображение знака следующий код:

Ну вот и все пожалуй. Теперь вы без проблем сможете вставить знак рубля к себе на сайт. Внизу «Демо» идет на страницу со знаком рубля в «Arial», а кнопка «Скачать» отвечает за скачивание всех пяти версий знака. Всего доброго

Скачать (156.04 Kb) Demo Отблагодарить Эрика

0 0 голоса

Рейтинг статьи