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

Вставляем знак рубля на сайте
Комментарии: 6

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

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

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

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

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

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

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

aaArial Regular
bbArial Italic
ccArial Bold
ddArial Bold Italic
eeGeorgia Regular
ffGeorgia Italic
ggGeorgia Bold
hhGeorgia Bold Italic
iiTahoma Regular
jjTahoma Bold
kkTimes Regular
llTimes Italic
mmTimes Bold
nnTimes BoldItalic
ooLucida Sans
ppLucida Sans Bold
qqVerdana Regular
rrVerdana Italic
ssVerdana Bold
ttVerdana Bold Italic
uuFutura
vvTrump Mediaeval
wwITC Studio Script
Ещё интересное — 6
Комментарии —
  1. Тимофей
    Тимофей03 октября 2019, 12:43#
    Проще использовать ₽

    Номер в Юникоде U+20BD
    HTML-код ₽
    CSS-код \20BD
    1. Andy Si03 октября 2019, 13:42#
      Да, проще… но это не на 100% кроссбраузерно. Под Windows может и норм всё, а под другими операционными системами бывают проблемы с отображением.
      1. Andy Si03 октября 2019, 13:43#
        Именно поэтому такой немного извращённый способ здесь описан, который работает вообще везде :)
      2. Пуп земли
        Пуп земли20 мая 2020, 11:49(был изменён)#
        Спасибо
        1. Leff1982
          Leff198202 июня 2020, 16:53(был изменён)#
          Спасибо! Классное решение!

          Для магазина на Woocommerce скомбинировал его с этим решением https://icopydoc.ru/kak-izmenit-simvol-rublya-v-woocommerce/ и победил проблему с отображением значка рубля. И никакой кривой плагин от Saphali не нужен, и не нужно покупать за $29 плагин All Currencies for WooCommerce PRO, который теперь требует свежий Woocommerce, чтобы отображался значок рубля.

          1) Ставим в WooCommerce шрифт по ссылке автора выше. Можно через бесплатный плагин Custom Fonts.
          2) В теме Вордпресса через редактор темы вставляем в Style.css код автора. В коде меняем путь до шрифта, загруженного через плагин.
          3) Вставляем в functions.php код из ссылки во втором абзаце моего поста. В нем меняем class на тот, что у автора.
          4) Сохраняем. Радуемся. Теперь в вашем woocommerce-магазине будет отображаться значок рубля в любом браузере.

          Примечание: Если у вас где-то отображается буква i, а не значок рубля, значит у вас темой выводится заглавная буква — меняем через CSS на прописную.

          Делов на 10 минут с перекуром.
          1. Andy Si02 июня 2020, 18:57#
            Норм решение.
          © REALADMIN.RU   2024 г.
          Страница сгенерирована: 0,1969 s | 6 mb.
          На каком уровне Вы играете в шахматы?
          OPROS