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

Комментарии: 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

Комментарии —

Тимофей
Тимофей03 октября 2019, 12:43# ↓

Проще использовать ₽

Номер в Юникоде U+20BD
HTML-код ₽
CSS-код \20BD

ответить
1. Andy Si03 октября 2019, 13:42# ↑ ↓
  
  Да, проще… но это не на 100% кроссбраузерно. Под Windows может и норм всё, а под другими операционными системами бывают проблемы с отображением.
  
  ответить
2. Andy Si03 октября 2019, 13:43# ↑ ↓
  
  Именно поэтому такой немного извращённый способ здесь описан, который работает вообще везде :)
  
  ответить
Пуп земли
Пуп земли20 мая 2020, 11:49(был изменён)# ↓

Спасибо

ответить
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# ↑ ↓
  
  Норм решение.
  
  ответить