23 марта 2016
Кравченко Виктор

Внедрение знака рубля — самый правильный способ

HTML CSS Web
01

Здесь я расскажу как устроено отображение знака рубля руб. на этом сайте. Из всех способов, предложенный ниже, с моей точки зрения, является самым корректным и правильным. И суть его заключается в следующем — создается несколько отдельных шрифтов (основной regular и его версии bold, italic и bolditalic в случае необходимости). Каждый из которых содержит всего 4 символа — «р», «у», «б» и «.». На месте буквы «р» закреплен знак рубля руб., на месте букв «у», «б» и символа «.» — пустые глифы нулевой ширины.

Знак Рубля

официально утверждён в декабре 2013 года
02

Основным преимуществом данного метода, является отображение наименования руб. в случае, если со шрифтами что-то не в порядке. Подробности — далее.

03

Нам понадобятся:

04

Запускаем Fotogapher и создаем новый шрифт.

05
06

Открываем

Element → Font Info... → вкладка Encoding и выбираем любую кириллическую кодировку:

07
08

Вводим имя шрифта

вкладка Name, которое будет использоваться в проекте и задаем соответствующие параметры Weight и Slope:

09
10

Открываем в Fontographer шрифт, который содержит необходимый знак рубля. Копируем его и вставляем в поле, соответствующее строчной букве «р»:

11
12

Символам «у», «б» и «.» задаем нулевую ширину:

13
Уменьшаем ширину глифа до нуля.
Уменьшаем ширину глифа до нуля.
14

Экспортируем получившийся шрифт

File → Generate Font File...

15

Если сейчас посмотреть на получившийся шрифт мы увидим, что буква «р» заменена, а символов «у», «б» и «.» не видно вовсе — то что нам нужно:

16
17

Повторяем шаги начиная с переименования шрифта для всех последующих версий шрифта.

18

Загружаем все шрифты в сервис Font Squirrel. В режиме Expert... устанавливаем галочки — No Subsetting и Style Link и получаем комплект, готовый для вставки в ваш проект.

Бонус — файлы для шрифта PT Sans (Regular, Italic, Bold, Bold-Italic) — PT Sans Rub (webfontkit).zip (56,4 KB)
19

Далее подключаем стили:

20 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@font-face { font-family: 'pt_sans_rub'; src: url(;'ptsansrub-bold-webfont.eot'); src: url(;'ptsansrub-bold-webfont.eot?#iefix') format('embedded-opentype'), url('ptsansrub-bold-webfont.woff2') format('woff2'), url('ptsansrub-bold-webfont.woff') format('woff'), url('ptsansrub-bold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'pt_sans_rub'; src: url(;'ptsansrub-bolditalic-webfont.eot'); src: url(;'ptsansrub-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('ptsansrub-bolditalic-webfont.woff2') format('woff2'), url('ptsansrub-bolditalic-webfont.woff') format('woff'), url('ptsansrub-bolditalic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'pt_sans_rub'; src: url(;'ptsansrub-italic-webfont.eot'); src: url(;'ptsansrub-italic-webfont.eot?#iefix') format('embedded-opentype'), url('ptsansrub-italic-webfont.woff2') format('woff2'), url('ptsansrub-italic-webfont.woff') format('woff'), url('ptsansrub-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'pt_sans_rub'; src: url(;'ptsansrub-regular-webfont.eot'); src: url(;'ptsansrub-regular-webfont.eot?#iefix') format('embedded-opentype'), url('ptsansrub-regular-webfont.woff2') format('woff2'), url('ptsansrub-regular-webfont.woff') format('woff'), url('ptsansrub-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
21

И определяем стиль для отображения:

22 CSS
1
2
3
span.rub { font-family:pt_sans_rub; }
23

Заменяем все вхождения текста руб. на <span class="rub">руб.</span> и получаем — руб..

25

Похожие запросы:

  • Знак рубля на сайте: экспресс-метод
  • Символ рубля при помощи CSS
  • Новый знак рубля ₽ в блог
  • Как вставить на сайт знак рубля
  • Кроссбраузерный знак рубля в HTML/CSS
  • Знак Рубля средствами HTML
comments powered by HyperComments

Яндекс.Метрика