Как нарисовать знак рубля на сайте

Подумываю систематизировать надписи и обозначения рублей на сайте. Самое интересное, что это изображение было разработано совместно несколькими рабочими группами: «Дизайн-депо», «Дизайнет», «Директ-дизайн», «Имадизайн», «Леттерхед», «Паратайп» и Студией Артемия Лебедева. Дабы придать большую гласность, Студия Артемия Лебедева описала серию правил и методов размещения знака рубля. А так же сформировала несколько файлов шрифтов, для использования этих знаков, на сторонних сайтах.

Так же есть масса методов установки этого символа рубля. Начиная от картинок и заканчивая манипуляциями с каскадными таблицами стилей. Я предпочитаю смешанный и наиболее популярный на других сайтах метод.

И так, использование знака рубля возможно после правки CSS и потом придётся писать рубли специфическим методом. Начнём с правки CSS. В свою таблицу каскадных стилей нужно поместить следующие строки:

<style type="text/css">
    @font-face { font-family: "Rubl Sign"; src: url(http://www.artlebedev.ru/;-)/ruble.eot); }
    span.rur { font-family: "Rubl Sign"; text-transform: uppercase; // text-transform: none;}    
    span.rur span { position: absolute; overflow: hidden; width: .45em; height: 1em; margin: .1ex 0 0 -.55em; // display: none; }
    span.rur span:before { content: '2013'; }
</style>

Когда мы интегрируем этот код в свой CSS, то в статьях можно будет использовать вот такую конструкцию для вывода красивых символов:

<span class="rur">p<span>уб.</span></span>

Конструкция несколько великовата, но она необходима для определённой кроссбраузерности. И для совместимости со старыми браузерами. Старый браузер выведет надпись руб. вместо пустого места.

И так, лично мне нравится идея с переходом на собственную ли

Отредактировано:2020-09-28 08:37:09