САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

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 Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Шрифты



CSS свойство font задает шрифту, утолшение, размер и стиль текста.


Разница между Serif и Sans-serif

Шрифт Serif vs. Sans-serif

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

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

  • Стандартные семейства - группа семейств шрифтов с похожим видом "Serif" или "Monospace"
  • Семейства шрифтов - конкретный шрифт "Times New Roman" или "Arial"
Стандартные семейства Семейства шрифтов Описание
Serif Times New Roman
Georgia
Шрифты с засечками имеют небольшие линии на концах некоторых букв
Sans-serif Arial
Verdana
"Sans" без засечек - шрифты не имеют засечки на концах букв
Monospace Courier New
Lucida Console
Моноширинный шрифт все буквы имеют одинаковую ширину

Примечание: На экранах компьютеров, без засечек шрифты легче читать, чем шрифты с засечками.


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

Семейство шрифта текста определяется свойством font-family.

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

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

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

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

Пример

p {
   font-family: "Times New Roman", Times, serif;
}
Редактор кода »

Для часто используемых сочетаний шрифта, посмотрите на наши Безопасные Комбинации Веб Шрифтов.


Стиль шрифта

Свойство font-style в основном используется для установки курсивного текста.

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

  • normal - Текст отображается нормально
  • italic - Текст отображается курсивом
  • oblique - Текст отображается наклонным, он очень похож на курсив, но менее поддерживается браузерами

Пример

p.normal {
   font-style: normal;
}

p.italic {
   font-style: italic;
}

p.oblique {
   font-style: oblique;
}
Редактор кода »

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

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

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

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

Значение свойства font-size может быть размер абсолютный или относительный

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

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

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

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

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


Размер шрифта в процентах

Настройка размера текста с пикселями дает Вам полный контроль над размером текста:

Пример

h2 {
   font-size: 40px;
}

h3 {
   font-size: 30px;
}

p {
   font-size: 14px;
}
Редактор кода »

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


Размер шрифта в em

Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

Размер в em рекомендуется консорциумом W3C.

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

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

Пример

h2 {
   font-size: 2.5em; /* 40px/16=2.5em */
}

h3 {
   font-size: 1.875em; /* 30px/16=1.875em */
}

p {
   font-size: 0.875em; /* 14px/16=0.875em */
}
Редактор кода »

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

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


Используйте сочетание % и em

Решение, которое работает во всех браузерах, установит размер шрифта по умолчанию в процентах для елемента <body>:

Пример

body {
   font-size: 100%;
}

h2 {
   font-size: 2.5em;
}

h3 {
   font-size: 1.875em;
}

p {
   font-size: 0.875em;
}
Редактор кода »

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


Полнота шрифта

Свойство font-weight задает полноту шрифта:

Пример

p.normal {
   font-weight: normal;
}

p.thick {
   font-weight: bold;
}
Редактор кода »

Варианты шрифта

Свойство font-variant указывает, должен ли текст отображаться в малом прописном шрифте.

Значение шрифта small-caps, устанавливает все строчные буквы в большом прописном шрифте. Тем не менее, заглавные буквы будут выглядеть на размер больше, тем оригинальней будут выглядеть заглавные буквы в тексте.

Пример

p.normal {
   font-variant: normal;
}

p.small {
   font-variant: small-caps;
}
Редактор кода »

Еще примеры

Все свойства шрифта в одном объявлении
В этом примере показано, как использовать свойство сокращения для установки всех свойств шрифта в одном объявлении.



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

Свойство Описание
font Устанавливает все свойства шрифта в одном объявлении
font-family Устанавливает шрифт для текста
font-size Устанавливает размер шрифта текста
font-style Устанавливает стиль шрифта для текста
font-variant Указывает, должен ли текст должен отображаться в малым прописным шрифтом
font-weight Устанавливает полноту шрифта