08. Размер шрифта.
Управление изменением размера шрифтов осуществляется с помощью свойства font-size:
Подобно тому, как во встроенные стили любого браузера установлен тип шрифта по умолчанию (обычно это "Times New Roman"), также имеются базовые (дефолтные, по умолчанию) размеры шрифта:
Подставляя базовые значения в свойство font-size, мы не должны получить никаких изменений размера шрифта, так, как будто, мы вообще не используем свойство font-size.
Если мы хотим увеличить размер шрифта, то должны использовать значения больше, чем базовые, например:
font-size: 200%;
font-size: 2em;
font-size: 32px;
font-size: 24pt;
font-size: large;
Если мы хотим уменьшить размер шрифта, то должны использовать значения меньше, чем базовые, например:
font-size: 50%;
font-size: 0.5em;
font-size: 8px;
font-size: 6pt;
font-size: small;
Наилучший, очевидно, способ сегодня - задавать размер в пикселях. Именно данного способа мы и будем придерживаться.
Попробуем создать несколько классов для разных размеров, причем для шрифтов малых размеров будем использовать шрифты sans-serif, а для больших serif.
Классы для указанных шрифтов, создаются следующим образом:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере. Получается такой вот конкурс по теме "У кого самое острое зрение":
css_008_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_008_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание на возможность увеличения шрифта вручную, если, например, автор сайта использует слишком мелкий шрифт и у вас есть желание сделать этот шрифт крупнее. Это достигается нажатием комбинации клавиш CTRL+, обратный эффект уменьшения размера шрифта достигается нажатием комбинации клавиш CTRL-.
Единицы измерения размера шрифта font-size:
% - проценты
em - единицы
px - пиксели
pt - пункты
medium, small, large, ... - ключевые слова
% - проценты
em - единицы
px - пиксели
pt - пункты
medium, small, large, ... - ключевые слова
Подобно тому, как во встроенные стили любого браузера установлен тип шрифта по умолчанию (обычно это "Times New Roman"), также имеются базовые (дефолтные, по умолчанию) размеры шрифта:
Базовый размер шрифта в разных единицах:
100%
1em
16px
12pt
medium
100%
1em
16px
12pt
medium
Подставляя базовые значения в свойство font-size, мы не должны получить никаких изменений размера шрифта, так, как будто, мы вообще не используем свойство font-size.
Если мы хотим увеличить размер шрифта, то должны использовать значения больше, чем базовые, например:
font-size: 200%;
font-size: 2em;
font-size: 32px;
font-size: 24pt;
font-size: large;
Если мы хотим уменьшить размер шрифта, то должны использовать значения меньше, чем базовые, например:
font-size: 50%;
font-size: 0.5em;
font-size: 8px;
font-size: 6pt;
font-size: small;
Наилучший, очевидно, способ сегодня - задавать размер в пикселях. Именно данного способа мы и будем придерживаться.
Попробуем создать несколько классов для разных размеров, причем для шрифтов малых размеров будем использовать шрифты sans-serif, а для больших serif.
Классы для указанных шрифтов, создаются следующим образом:
.font_size_01 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1px;
}
.font_size_02 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 2px;
}
.font_size_03 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 3px;
}
.font_size_04 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 4px;
}
.font_size_05 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 5px;
}
.font_size_06 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 6px;
}
.font_size_07 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 7px;
}
.font_size_08 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8px;
}
.font_size_09 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
}
.font_size_10 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.font_size_11 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.font_size_12 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.font_size_14 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.font_size_16 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 16px;
}
.font_size_18 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 18px;
}
.font_size_20 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 20px;
}
.font_size_24 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 24px;
}
.font_size_32 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 32px;
}
.font_size_48 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 48px;
}
.font_size_100 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 100px;
}
.font_size_200 {
font-family: "Times New Roman", "Georgia", serif;
font-size: 200px;
}
css_008_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_008_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание на возможность увеличения шрифта вручную, если, например, автор сайта использует слишком мелкий шрифт и у вас есть желание сделать этот шрифт крупнее. Это достигается нажатием комбинации клавиш CTRL+, обратный эффект уменьшения размера шрифта достигается нажатием комбинации клавиш CTRL-.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
