x
 
Антон Полещук
7 сентября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Рустам, существует ли современный способ вывода знака рубля для всех устройств, начиная от Оперы Мини и заканчивая письмами, в разных вариантах начертания и размерах шрифта?


Советую использовать знак рубля.

Знак рубля — символ Юникода с 2014 года. Если в шрифте, который вы используете на сайте или в письме, есть этот символ, то он отобразится на любом устройстве, которое поддерживает Юникод версии 7.0 и выше. Это практически все современные устройства за исключением некоторых стиральных машин.

Если в нужном шрифте нет символа рубля, то подберите шрифт с похожим начертанием, в котором он есть, и используйте шрифт прицельно:

<!-- index.html -->
<div class="price">
  10 000<span class="rub">₽</span>
</div>
/* style.css */
.price {
  font-family: 'Tinos', serif;
}

.rub {
  font-family: Bureauserif, serif;
}
10 000
В шрифте Tinos нет символа рубля, поэтому в нужном месте подменяем его на Бюросериф

Опера Мини в режиме экстремального сжатия использует устаревший движок Престо для отрисовки сайтов на сервере. Этот движок не понимает нестандартные шрифты, поэтому возьмёт системный. Дальше законы те же: если в системном шрифте есть знак рубля и устройство поддерживает седьмой юникод, то вы в порядке.

Вёрстка знака рубля в 2012
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Антон Куликов
7 сентября 2017

Антон, обратите внимание, что вместо отсутствующего глифа (₽) система/браузер зачастую пытаются подставить глиф из наиболее подходящего по их мнению шрифта.

Виндоус подставляет вместо знака Ариал (или Тахому, а в ФайерФоксе еще и Таймс Нью Роман). МакОС Икс в подстановке использует .Helvetica Neue DeskInterface (в Сафари и Хроме).

Поэтому советую проверять знак в инспекторе элементов: сегмент Rendered Fonts вкладки Computed показывает количество использованных глифов и названия использованных шрифтов.

Подробности и тестовая страничка для гугл.шрифтов: http://anton-g-kulikov.github.io/rouble-test/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Типовые решения в вёрстке. Как сверстать гамбургерное меню Рецепт: бегущая строка на сайте без Яваскрипта 2 Как правильно работать с начертаниями подключаемого шрифта в ЦСС? Что дизайнеру стоит знать о якорных ссылках?




Недавно всплыло

Правдивость 2 Кто клиент? 1 1 1