Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 7 Шрифты


« Назад Далее »

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


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

Serif vs. Sans-serif

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


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

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

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


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

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

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

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

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

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

Пример

p.serif{font-family:"Times New Roman",Times,serif;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Стиль Шрифта

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

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

  • normal - Обычный текст
  • italic - Курсивный текст
  • oblique - Наклонный текст (наклонный (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, т.е. 16 пикселей (16px=1em).


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

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

Пример

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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

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


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

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

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

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

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

Пример

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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

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


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

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

Пример

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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


Примеры

Еще примеры

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

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

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


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

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




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru