шрифты

На сайте WebReference.ru добавлено небольшое руководство по Font Awesome. Это шрифт с иконками и набор стилей для их применения на сайте. Кстати, частично добавил на сайт эти иконки, так что вы можете посмотреть как это работает в действии.

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

К счастью, HTML5 предоставляет нам еще один вариант: веб-шрифты. Набор шрифтов может содержать графические иконки и наборы символов. Wingdings — это один из наиболее известных, но свободные шрифты вроде Iconic могут быть более полезными и обеспечат пример кода на HTML и CSS.

Статья взята с сайта PHP Junior с разрешения автора.

В своей предыдущей статье «Font Squirrel @font-face Generator vs Google WebFonts» я сделал обзор двух самых популярных сервисов для встраивания шрифтов в вёрстку, а также обещал в следующей статьей раскрыть секреты его использования.

Статья взята с сайта PHP Junior с разрешения автора.

Последние года два в веб-разработке появился тренд: использовать какие-то кастомные шрифты не только в заголовках, меню и в шапке (при помощи Cufon или, не дай бог, изображений), но и вообще по всему контенту. Arial, Verdana, Times New Roman настолько приелись глазам за пару десятков лет, что людям захотелось чего-то свеженького — по крайней мере, с тех пор, как браузеры стали это позволять.

Конечно, кое-где перебарщивают с этим делом местами, перебарщивают. Но, если всё это грамотно и со вкусом сочетать, это здорово освежит ваш сайт и обрадует дизайнера, ведь зачастую его смелые и интересные идеи обламывались именно из-за технической сложности или невозможности их осуществления.

В этой статье я рассмотрю два наиболее известных веб-сервиса, помогающих встроить шрифты в HTML-вёрстку:

• Google WebFonts
• Font Squirrel @font-face Generator

Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам <h1>. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.