Вывод символа индийской валюты на сайте: HTML и CSS

Быстрый ответ

Для вывода символа индийской рупии используйте HTML-сущность ₹. Оформление символа настраивается при помощи CSS.

Пример использования в HTML:

<p>Цена: &#8377;1,000</p>

Подберите уместные шрифты в CSS для корректного отображения символа:

.rupee-symbol {
    font-family: 'Arial Unicode MS', Arial, sans-serif;
}

Прикрепите CSS-класс к HTML-элементу:

<p class="rupee-symbol">Цена: ₹1,000</p>

Устанавите кодировку страницы в UTF-8:

<meta charset="UTF-8">

Юникод, шрифты и тестирование

Можно использовать Unicode-символ рупии U+20B9 или ₹:

<span>&#x20B9;1,500</span>

Чтобы обеспечить одинаковое отображение на различных устройствах, заранее укажите нужные шрифты при стилизации:

.rupee-symbol {
    font-family: "Arial Unicode MS", "Arial", sans-serif;
}

Для эстетики используйте шрифт FontAwesome:

<i class="fa fa-inr"></i>1,000

Подключите FontAwesome:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

Пользовательские шрифты и API

Если вы захотите использовать нетиповые шрифты, обратите внимание на Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Укажите выбранный шрифт в CSS:

.rupee-symbol {
    font-family: 'Open Sans', sans-serif;
}

Воспользуйтесь WebRupee API:

<link href="http://cdn.webrupee.com/font" rel="stylesheet">

Следом присоедините класс к элементу:

<span class="WebRupee">Rs.</span>

Совместимость и доступность

Браузеры выводят символы по-разному, испытайте их в различных браузерах и устройствах.

В случаях, когда FontAwesome или API не грузятся, составьте набор шрифтов в CSS:

.rupee-symbol {
    font-family: "Arial Unicode MS", Arial, sans-serif;
}

Примените @font-face для подключения пользовательских шрифтов:

@font-face {
    font-family: 'CustomArial';
    src: url('myfont.woff') format('woff');
}

Визуализация

Продемонстрируйте символ рупии так, чтобы он был узнаваем для аудитории:

**Кошелек на сайте**: [💻💼]

<!-- Шаг 1: Выберите из вашего цифрового кошелька -->
<p style="font-family: 'Arial Unicode MS', Arial, sans-serif;">Итого: ₹</p>

**Результат:** 💻💼 -> [₹₹₹₹₹₹₹₹₹₹]

Удостоверьтесь, что применяемый шрифт поддерживает символ рупии.

Пользовательский опыт и доступность

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

Придайте содержимому содержательную значимость:

<price value="1000" currency="INR">&#8377;1,000</price>

Повышайте доступность с помощью ARIA-меток:

<span role="text" aria-label="Стоимость в рупиях">₹1,000</span>

Стремитесь к соответствию HTML5 стандартам.

Полезные материалы

1. Unicode Character 'INDIAN RUPEE SIGN' (U+20B9) – Справочник по символу индийской рупии в Unicode.
2. <meta>: Элемент метаданных – HTML | MDN – Инструкция по использованию meta-тегов и установке кодировки.
3. Как использовать @font-face в CSS | CSS-Tricks – Руководство по использованию @font-face.
4. Как использовать Google Fonts – Подробная инструкция по внедрению Google Fonts.
5. Обзор шрифтов – Google Fonts – Коллекция с бесплатными шрифтами от Google.
6. ₹ – Знак индийской рупии, номер Unicode: U+20B9 | SYMBL – Информация о символе рупии в системе Unicode.
7. Инструмент для отладки символов UTF-8 – Инструмент для выявления и устранения проблем с UTF-8.