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

18 июня 2020

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

Обычное решение: ₽ — html код ₽
Кроссбраузерное решение: i

Загружаем шрифт «rouble.otf» на сайт и подключаем в CSS стилях.

@font-face { 
    font-family: "rouble";
    src: url("../fonts/rouble.otf") format("opentype");
}
.rub { font-family: "rouble"; }

На сайте выводим знак следующим образом:

<span class="rub">i</span>

В шрифте «rouble» английская буква «i» отрисована как знак рубля начертанием «Tahoma Regular». Для другого начертания достаточно изменить букву.

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

Статьи