Как нарисовать знак рубля на сайте
Подумываю систематизировать надписи и обозначения рублей на сайте. Самое интересное, что это изображение было разработано совместно несколькими рабочими группами: «Дизайн-депо», «Дизайнет», «Директ-дизайн», «Имадизайн», «Леттерхед», «Паратайп» и Студией Артемия Лебедева. Дабы придать большую гласность, Студия Артемия Лебедева описала серию правил и методов размещения знака рубля. А так же сформировала несколько файлов шрифтов, для использования этих знаков, на сторонних сайтах.
Так же есть масса методов установки этого символа рубля. Начиная от картинок и заканчивая манипуляциями с каскадными таблицами стилей. Я предпочитаю смешанный и наиболее популярный на других сайтах метод.
И так, использование знака рубля возможно после правки 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
Полезная штука на сайтах экономической тематики. Ну и на обычных сайтах ради своеобразной фишки пойдет :)