Подключаем знак рубля как сами знаете кто

rub-preview

 

Намедни возникла тривиальная задача: подключить на сайте знак рубля. Большинство шрифтов еще не поддерживают рубль «из коробки» и это добавляет хлопот. Обычно, мы ограничивались шрифтами включающими его изначально, либо находили готовые знаки. В дизайне же использовался Open Sans без его поддержки, а найденное решение заставило задуматься, как всё-таки подключать шрифт не доставляя дискомфорта пользователю?

Привычные способ, при котором знак добавляется в шрифт, не устроил. Мы использовали Google Fonts и отказываться от него, ради одного знака, было не разумно.

Устаревшие варианты, описанные в «Техногрете», не брались во внимание. Однако, прогресс не стоит на месте и на новых сайтах Лебедева можно увидеть иной способ.

Для примера возьмём pushe.ru. При копировании цены товара, знак рубля не отобразится, если в системе не установлен нужный шрифт. Здесь же человек увидит привычное сокращение «руб.». Очевидно, что это решение гибче обычной вставки знака.

Попробуем разобраться как это сделано.

glyphs-window

Мы будем работь с подопытным шрифтом в приложении Glyphs для Mac OS, но это не играет большой роли. В начале нам нужно удалить все лишние глифы, за исключением «р», «у», «б» и точки. Строчную «р» превращаем в знак рубля, а у других знаков уменьшаем кегельную площадку на ноль и экспортируем.

 

glyphs-value

 

Для шрифта мы выбрали формат WOFF, поддерживаемый большинством браузеров.

Для версий IE, ниже 9-й, было решено не использовать отдельный формат шрифта. Если же понадобится полная кроссбраузерность, то обратитесь к пуленепробиваемому синтаксису для @font-face на Хабре, и сгенерировать шрифт во всех форматах используя fontsquirrel.

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

Переходим к HTML и CSS. Подключаем шрифт и создаём для него класс:

@font-face {
font-family: "rub";
src: url("data:font/opentype;base64,[base64]") format("truetype");
}

<span class="rub">руб.</span>

  • gasoid

    а пример в студию ?

    • EKrylov

      Ссылка на Лебедевский pushe.ru в тексте, а наши проекты с этим методом в разработке, скоро будет 2-3 сайта.

  • Константин Домань

    А как насчет ссылки на сам шрифт со знаком рубля для OpenSans?