| 01 |
Здесь я расскажу как устроено отображение знака рубля руб. на этом сайте. Из всех способов, предложенный ниже, с моей точки зрения, является самым корректным и правильным. И суть его заключается в следующем — создается несколько отдельных шрифтов (основной regular и его версии bold, italic и bolditalic в случае необходимости). Каждый из которых содержит всего 4 символа — «р», «у», «б» и «.». На месте буквы «р» закреплен знак рубля руб., на месте букв «у», «б» и символа «.» — пустые глифы нулевой ширины. |
|
| 02 |
Основным преимуществом данного метода, является отображение наименования руб. в случае, если со шрифтами что-то не в порядке. Подробности — далее. |
|
| 03 |
Нам понадобятся:
|
|
| 04 |
Запускаем Fotogapher и создаем новый шрифт. |
|
| 06 |
Открываем и выбираем любую кириллическую кодировку: |
|
| 08 |
Вводим имя шрифта , которое будет использоваться в проекте и задаем соответствующие параметры Weight и Slope: |
|
| 10 |
Открываем в Fontographer шрифт, который содержит необходимый знак рубля. Копируем его и вставляем в поле, соответствующее строчной букве «р»: |
|
| 12 |
Символам «у», «б» и «.» задаем нулевую ширину: |
|
| 13 |
Уменьшаем ширину глифа до нуля.
|
|
| 14 |
Экспортируем получившийся шрифт |
|
| 15 |
Если сейчас посмотреть на получившийся шрифт мы увидим, что буква «р» заменена, а символов «у», «б» и «.» не видно вовсе — то что нам нужно: |
|
| 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 |
Похожие запросы:
|
|