Используем необычные шрифты для заполнения макета сайта
23 апреля 2018 | Опубликовано в css | Нет комментариев »
Большинство веб-дизайнеров сталкивались с ситуациями, когда заказчик спрашивал: «Этот текст на латыни… Его же не будет в окончательном варианте, правда?». Есть много альтернатив для привычной «рыбы» lorem ipsum, но ни один из этих генераторов не решает основную проблему: клиенты всегда будут считать заполняющий текст окончательным вариантом. Недавно нам попалось несколько интересных и творческих подходов к этой проблеме: заполняющие шрифты, которые превращают любой текст, включая Lorem ipsum, в нечто совершенно другое, очень подходящее для создания каркаса сайта и макета для клиента.
Шрифт Blokk создает видимость «редактированного» текста, как будто подвергшегося цензуре ЦРУ. Что очень удобно, этот шрифт можно легко встроить в веб-сайт и удобно использовать в макетах. Текст, отображенный в шрифте Blokk, выглядит следующим образом:
Обычно этот шрифт будет выводиться в меньшем размере для каркаса сайта.
Christian Naths, руководствуясь той же мыслью, создал шрифт под названием Redacted и добавил версию рукописного шрифта:
Эти шрифты можно использовать двумя следующими способами:
1) Установить шрифт как системный и использовать в тех инструментах, которыми Вы пользуетесь для создания макетов веб-сайтов, как обычный шрифт. Не забудьте, что Вам может быть нужно сделать результат растровым, чтобы заказчик смог его увидеть, так как у него в системе этот шрифт не будет установлен.
2) Использовать шрифт в макете сайта, находящемся в интернете, встроив его как веб-шрифт:
@font-face { font-family: 'Blokk'; src: url('BLOKKRegular.woff') format('woff'); font-weight: normal; font-style: normal; } p { font-family: Blokk; }
Обратите внимание, что эти шрифты не уничтожают текст, который отображают, — его все еще можно прочесть, если скопировать его и вставить в текстовый редактор или посмотреть исходники веб-сайта в браузере. Так что не стоит писать, используя такие скрывающие шрифты, что-то, что Вы бы не хотели, чтобы заказчик или кто-то другой прочел.
Примечание: К сожалению, оба этих шрифта не сработают на кириллических текстах, но это не влияет на их возможность применения для макета сайта.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений