Как сделать знак рубля в html

Обновлено: 07.07.2024

Поскольку российский центральный банк уже одобрил новый символ для российского рубля, есть ли для него какой-либо HTML-код? Или мне нужно использовать png-изображения?

Поскольку это только что было решено, я очень сомневаюсь, что W3C его стандартизировал, производители шрифтов создали этот символ в шрифтах, а браузеры и операционные системы были обновлены.

Этот вопрос проблематичен, так как, когда ситуация изменится, все текущие ответы будут признаны недействительными.

@MartinSmith Правда, но это может произойти с любыми изменениями в технологии. Как только символ Unicode будет утвержден, эти ответы будут считаться устаревшими, но они все равно должны работать, даже если есть лучший способ сделать это.

С 16 июня 2014 года в юникоде есть буква: \u20bd , представляющая знак валюты в валюте:

Хотя, я полагаю, в настоящее время не все шрифты способны показать это. Возможность видеть знак в браузере обычно зависит от ваших системных шрифтов. На сегодняшний день мои веб-шрифты Mac OS показывают это правильно, но я не проверял его на Windows и Linux.

Поэтому не рекомендуется использовать этот новый знак, когда для читателя важно, чтобы он полагался только на системные шрифты, которые могут быть устаревшими. Если вы хотите быть уверенным, что знак будет отображаться, вам нужно будет предоставить свой собственный шрифт, по крайней мере, для абзацев, которые могут содержать знак RUB.

Russia изменил символ рубля в 2013-2013 годах.

Смотрите страницы Википедии Российский рубль и Рублевый знак для получения более подробной информации.

Консорциум Unicode официально обозначил кодовую точку, U+20BD RUBLE SIGN , пронумерованный 8,381 (десятичный) и U + 20BD (Unicode hex), для нового символа в Unicode 7.0, выпущенном 2014-06-16. См. Последнюю запись в эту Юникодную диаграмму валютных символов (PDF).

Не путайте этот новый символ либо с армянской буквой ք , либо с латинской буквой Ꝑ .

By the way, Unicode 7 also gained the manat used in Azerbaijan, U+20BC MANAT SIGN, ₼. More importantly, Unicode also got the Spock hand sign, Vulcan Salute, U+1F596, .

У старых шрифтов, конечно, не будет glyph. Вам нужно будет получить новые или обновленные шрифты .

В качестве альтернативы символу вы всегда можете использовать аббревиатуру с тремя буквами RUB . Стандартизован на международном уровне в ISO 4217.

Да, вы можете использовать изображение.

Если вы должны поддерживать старые компьютеры или старые браузеры, еще не обновленные с поддержкой и глифами для Unicode 7, то использование изображения или аббревиатуры RUB являются единственными верными решениями.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Знак Рубля шрифтом 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. Далее вставляете туда, где нужно отображение знака следующий код:

Рубль — официальный символ валюты России. Хотя он пишется как заглавная буква P с горизонтальной чертой вниз, вы можете написать правильный символ ₽ с помощью сочетаний клавиш.

Ярлыки альтернативного кода для знака рубля

Ниже приводится краткое описание сочетаний клавиш для ввода знака рубля на компьютерах Windows и Mac.

Введите Рубль Войти Компьютеры Windows

Чтобы ввести символ на компьютерах под управлением Windows, воспользуйтесь одним из следующих способов:

Нажмите одну из клавиш alt и введите 8381 с цифровой клавиатуры. Это сделает знак рубля Руб..
В документах Word введите 20BD, затем нажмите одновременно клавиши alt и X, чтобы создать этот символ.

Введите рубль Войти на Mac

Как и в Windows, воспользуйтесь одним из следующих способов, чтобы ввести знак в macOS.

Рубль Войти HTML

Используйте один из приведенных ниже кодов, чтобы вставить знак в HTML-документ.

Вы также можете использовать коды с другими тегами HTML, такими как

Рубль Войти в CSS

Также можно вставить знак в веб-документы, используя псевдоэлементы CSS, как показано ниже:

Дисплей знака рубля

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

Примечание: Криптовалюта Petro также использует тот же знак рубля с незначительным изменением, что и закругленный угол в букве P.

Читайте также: