• CSS Основы

• Что Такое CSS ?
• Синтаксис CSS
• Селекторы id и class
• Добавление Стилей в HTML Документ

• CSS Оформление

• CSS Фон
• CSS Текст
• Шрифты в CSS
• CSS Ссылки
• CSS Списки
• CSS Таблицы

• CSS Блоки

• CSS Блочная Модель
• CSS Границы
• CSS Контуры
• CSS Поля
• CSS Отступы

• CSS Продвинутый

• Сгруппированные и Вложенные Селекторы
• CSS Размеры
• Отображение и Видимость Элементов
• CSS Позиционирование
• Плавающие Элементы
• CSS Выравнивание
• Псевдо Классы в CSS
• Псевдо Элементы в CSS
• Панель Навигации
• Галерея Изображений
• Прозрачность Изображений в CSS
• Спрайты Изображений
• CSS Медиа Типы
• Атрибутивные
  Селекторы
• Заключение

• CSS Примеры

• CSS Примеры

• CSS Справочники

• CSS Справочник
• CSS Единицы Измерения
• CSS Значения Цветов
• CSS Названия Цветов
• CSS HEX Значения Цветов

CSS свойства шрифта определяют имя семейства шрифта, жирный шрифт или нет, размер, и стиль текста.

Разница Между Шрифтами Serif и Sans-serif

Считается, что на дисплеях компьютеров шрифты sans-serif легче читать, чем шрифты serif.

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

В CSS сушествует два типа имен семейств шрифтов:

• обобщенное семейство (generic family) - группа семейств шрифтов с одинаковым начертанием (например "Serif" или "Monospace")
• семейство шрифтов (font family) - специфическое семейство шрифтов (например "Times New Roman" или "Arial")

Семейство Шрифтов

Семество шрифта устанавливается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве "запасных" вариантов. Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.

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

Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки, например семейство шрифтов "Times New Roman".

Более одного семейства шрифтов указывается через запятую:

Стиль Шрифта

Свойство font-style в основном используется, чтобы указать курсивный текст.

Это свойство имеет три значения:

• normal - Обычный текст
• italic - Курсивный текст
• oblique - Наклонный текст (наклонный (oblique) текст очень похож на курсивный, но меньше поддерживается)

Размер Шрифта

Свойство font-size устанавливает размер текста.

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

Всегда используйте подходящие теги HTML, например <h1> - <h6> для заголовков и <p> для параграфов.

Значение font-size может быть абсолютным или относительным.

Абсолютный размер:

• Устанавливает определенный размер шрифта
• Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо из соображений удобства просмотра)
• Абсолютный размер полезен, когда физический размер вывода известен

Относительный размер:

• Устанавливает размер относительно окружающих элементов
• Позволяет пользователю изменять размер текста в браузерах

Если вы не указываете размер шрифта, то размер шрифта по умолчанию, размер обычного текста, например в параграфах, равен 16px, т.е. 16 пикселей (16px=1em).

Установка Размера Шрифта в Пикселях

Установка размера шрифта в пикселях дает вам полный контроль на размером текста:

Пример выше позволяет браузерам Firefox, Chrome, и Safari изменять размер текста, но не Internet Explorer.

Размер текста может быть изменен во всех браузерах, используя инструмент увеличения (zoom) (однако, это изменяет размер страницы в целом, а не только текста).

Установка Размера Шрифта с Помощью Em

Чтобы избежать проблем изменения размера в Internet Explorer, многие разработчики используют единицы em вместо пикселей.

Единицы размеры em рекомендуются W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах равен 16px. Таким образом, размер по умолчанию одной единицы em равен 16px.

Размер может быть вычислен из пикселей в единицы em, используя эту формулу: пиксели/16=em

В примере выше, размер текста в em такой же, как и в предыдущем примере в пикселях. Однако, указывая размер в em, становится возможным подгонять размер текста во всех браузерах.

К сожалению, по-прежнему остается проблема с IE. При изменении размера текста, он становится больше чем должен, когда увеличиваешь его, и становится меньше, чем должен, когда уменьшаешь его.

Использование Комбинации Процентов и Em

Решение, которое работает во всех браузерах, - установить размер шрифта по умолчанию в процентах в элементе body:

Наш код теперь работает идеально! Он показывает одинаковый размер текста во всех браузерах, и позволяет всем браузерам изменять размер текста корректно!

Еще примеры

Установка степени жирности шрифта
Этот пример демонстрирует как установить степень жирности шрифта.

Установка разновидности шрифта
Этот пример демонстрирует как установить разновидность шрифта.

Все свойства шрифта в одном объявлении
Этот пример демонстрирует как использовать стенографическое свойство, чтобы установить все свойства шрифта в одном объявлении.

Все CSS Свойства Шрифта