Вставляем знак рубля на сайте
Категория: Разработка сайтов
Комментарии: 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». Для другого начертания достаточно изменить букву.
| a | a | Arial Regular |
| b | b | Arial Italic |
| c | c | Arial Bold |
| d | d | Arial Bold Italic |
| e | e | Georgia Regular |
| f | f | Georgia Italic |
| g | g | Georgia Bold |
| h | h | Georgia Bold Italic |
| i | i | Tahoma Regular |
| j | j | Tahoma Bold |
| k | k | Times Regular |
| l | l | Times Italic |
| m | m | Times Bold |
| n | n | Times BoldItalic |
| o | o | Lucida Sans |
| p | p | Lucida Sans Bold |
| q | q | Verdana Regular |
| r | r | Verdana Italic |
| s | s | Verdana Bold |
| t | t | Verdana Bold Italic |
| u | u | Futura |
| v | v | Trump Mediaeval |
| w | w | ITC Studio Script |
Плавное изменение высоты блока на CSS
Набор анимированных svg-preloader иконок
Применение псевдоклассов в CSS для выборки элементов
Вставляем кнопку «наверх» на сайт
Два фона у элемента на css
Номер в Юникоде U+20BD
HTML-код ₽
CSS-код \20BD
Для магазина на 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 минут с перекуром.