Шрифты в вебе

Font Face

95% информации
в вебе — текст. 

Все шрифты отличаются между собой. Для удобства работы, шрифты принято разделять на семейства.

Семейства шрифтов

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

Группа моноширинных шрифтов (monospace)

Семейство шрифтов в CSS

body { 
    font-family: Georgia, serif; 
}

body { 
    font-family: "PT Sans", Arial, sans-serif; 
}

шрифт с засечками

шрифт без засечек.

Как это работает?

body { 
    font-family: "PT Sans", Arial, sans-serif; 
}

шрифт без засечек.

Что это значит?

body { 
    font-family: "PT Sans", Arial, sans-serif; 
}

Условием отображения заданного вами шрифта в CSS файле является то, чтобы он был в наличии на компьютере пользователя. В противном случае, заданный вами шрифт будет заменен браузером на тот, который стоит по умолчанию, а зачастую это — Times New Roman.

Такое положение дел не кажется совсем уж радужным, ведь откуда вам знать, какие шрифты есть на устройствах пользователей?

Однако, у вас может возникнуть необходимость в использовании других, более экзотических шрифтов, которые, скорее всего не установлены на компьютерах пользователей.

Нестандартные шрифты

(custom fonts, веб-шрифты)

Нестандартный шрифт в отличии от стандартных — это шрифт, который с большой вероятностью будет отсутствовать у большинства посетителей сайта.

Google Fonts

Одним из самых популярных и удобных сервисов является Google Fonts.  Сервис имеет простой пошаговый интерфейс с возможностью выбора начертаний, языка и метода подключения шрифта (добавьте в свой код одну строку, и вот на сайте уже новый шрифт!).

Бесплатные и коммерческие шрифты

Шрифты являются интеллектуальной собственностью, и на рынке существует достаточно много платных шрифтов, для использования которых необходимо приобретать лицензию. Их существует несколько видов. Зачастую для использования в вебе придется купить отдельную лицензию, ведь размещение шрифтов на сайте несет с собой определенные риски.

Оформление текста

в CSS

font-family: задаем семейство шрифта 

body { 
    font-family: Georgia, serif; 
}

font-size: задаем размер шрифта 

body { 
    font-size: 14px; 
}

Другие единицы измерения для задания размеров шрифта:

 - em или rem: 2em или 2rem
 - Проценты: 80%
Пиксели  — это абсолютные единицы измерения, а проценты, em и rem — относительные.

Также размер шрифта можно задавать с помощью ключевых слов: small, large и т.д. Но их обычно не используют.

font-style: курсив

body { 
    font-style: normal; 
}

Начертание текста можно задавать с помощью свойства font-style. Его основные значения:

 - normal — обычное начертание;
 - italic — курсивное начертание.

 line-height: управляем высотой строки

body { 
    line-height: 1.3; 
}

Значение этого свойства можно задавать следующими способами:

 - Множителем, например 1.5, 2.
 - В процентах: 150%.
С помощью любых других единиц измерения CSS: 12px, 2em.

Предпочтительнее задавать межстрочный интервал либо множителем, либо в относительных единицах измерения.

font: все вместе

body { 
    font:400 normal small-caps 14px/1.3 Arial, sans-serif;
}

В свойстве font мы можем объединить font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family

color: цвет текста 

body { 
    color: #FF9900; 
}

Значение цвета можно задавать разными способами:

Шестнадцатеричным кодом, например #FF9900.
 - Ключевым словом: red.
 - В RGB-формате: rgb(255, 255, 0).
Чаще всего цвет задают в шестнадцатеричном формате.

text-decoration: подчеркивание и другие эффекты

a { 
    text-decoration: underline; 
}

Его значения:

- underline — подчеркивание;
- line-through — зачеркивание;
- overline — черта сверху;
- none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.

text-transform: регистр символов

h1 { 
    text-transform: uppercase; 
}

Его значения:

1. lowercase — все строчные;
2. uppercase — все прописные;
3. capitalize — каждое слово начинается с прописной;
4. none — отменяет изменение регистра.

white-space: управляем пробелами

p { 
    white-space: nowrap; 
}

• nowrap — отображает весь текст одной строкой без переносов;
• pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;
• pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
• normal — режим по умолчанию.

text-align: горизонтальное выравнивание текста

p { 
    text-align: justify; 
}

1. left — выравнивание по левому краю;
2. right — по правому краю;
3. center — по центру;
4. justify — по ширине.

vertical-align: вертикальное
выравнивание текста

.top { 
    vertical-align: top; 
}

У данного свойства много значений, но самые часто используемые:

1. top — выравнивание по верхнему краю строки;
2. middle — по середине;
3. bottom — по нижнему краю;
4. baseline — по базовой линии (значение по умолчанию).

text-shadow: тень текста

.shadow-text { 
    text-shadow: 1px 1px 2px #333;
}

• свойство text-shadow применяется к тексту;
• форма тени повторяет форму текстовых символов;
• можно управлять смещением тени, её цветом, а также размытием;
• нельзя управлять растяжением текстовой тени;
• можно создавать множественные тени.