С декабря 2013 года в России принят знак рубля в виде Р с перечеркнутой линией. Многие шрифты уже начали дополнять символом рубля. А как быть,если в системе нет этого символа?

История.

Еще в 2007 году был объявлен конкурс символа рубля. Работы были разные, некоторые вызывали даже смех)) Приведу несколько примеров.

С большим перевесом (более 60%) выиграл второй вариант работы Артемия Лебедева.

И казалось бы,стоит немного подождать, и все начнут применять этот знак. Но,как и во всем новом,приходится использовать костыли. А какие и зачем, спросите вы?

Если применять отдельный шрифт для сайта,то никаких трудностей не возникнет. Просто используем шрифт с встроенным знаком рубля и все. А если сайт использует встроенный в систему шрифт? Для пользователей Windows8 проблем не возникнет, в недавнем обновлении мелкософт добавил символ рубля в шрифты. А как быть тем, кто до сих пор не бросает свою старушку XP?  Хоть процент пользователей с данной ОС  постоянно уменьшается, веб дизайнерам пока рано сбрасывать их со счетов. Вот для них мы и будем делать костыль.

Итак, сайт использует стандартные шрифты системы.Для окошек Arial и для линуксоидов Helvetica

 font-family: Helvetica,Arial,sans-serif ;

У кого старые шрифты, на месте знака рубля будет прямоугольник с кодом знака рубля.

Можно было бы добавить на сайт шрифт Arial и подключить его,но вы же знаете, сколько весит Arial )))

Пойдем другим путем,добавим только знак рубля. Для этого надо немного владеть программой работы со шрифтами. Создаем файл шрифта только со знаком рубля. Добавляем несколько файлов (eot, woff, svg) для поддержки всеми браузерами.Файлы можно создать на замечательном сервисе Webfont Generator, но немного настроим вывод. Переключаемся в  «EXPERT» и ставим галочки «No Subsetting» и «Style Link».

Файлы добавляем на сервер.

Подключаем в CSS:

@font-face {
    font-family:'arialrubl';
    src: url('arialrubl.eot');
    src: url('arialrubl.eot?#iefix') format('embedded-opentype'),
        url('arialrubl.woff') format('woff'),
        url('arialrubl.ttf') format('truetype'),
        url('arialrubl.svg#arialrubl') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

а в body добавляем этот шрифт

body {
    font-family: Helvetica, Arial, arialrubl, sans-serif ;
}

Если браузер не находит нужного символа,он проверяет в следующем файле. Итак,если знака рубля не будет ни в Helvetica  ни в Arial , то он его найдет в arialrubl .

Протестим вашу систему на наличие знака рубля.

1. Вот так выглядит знак, если его нет в системе

2. Вот так он выглядит у вас в системе ₽

3. И вот так выглядит после внедрения шрифта с символом рубля ₽

Скачать файл шрифта знака  рубля