Мы продолжаем работать со шрифтами и если в прошлом уроке мы рассмотрели, как изменить тип шрифта то в этот уроке рассмотрим, как создаются условия для изменения размера шрифта и какие при этом используются единицы измерения.
Размер шрифта задается с помощью свойства font-size: ; и в значении указывается величина шрифта которую мы хотим указать. Как мы уже говорили ранее если не указать тип шрифта, то браузер его установит базовым шрифтом Times New Roman. Точно такая же ситуация обстоит и с размером шрифта. Если размер не указать, то браузер его задаст по умолчанию своим базовым размером.
Чтобы задавать размер шрифта нужно понимать как он отсчитывается, что наглядно показано на картинке ниже. То есть размер шрифта задается от базовой линии до кегельной площадки.
Далее рассмотрим единицы измерения с помощью которых можно задать размер шрифта. Таких единиц измерения для установки размера шрифта имеется несколько и для каждой единицы измерения в браузере установлено базовое значение.
- % - Проценты: 100%;
- em – Еденицы: 1em;
- px – Пиксели: 16px;
- pt – Пункты: 12pt;
- Ключевые слова (medium, small, large, …): medium
Если мы зададим одно из выше перечисленных значений для шрифта то у нас нечего не изменится так как по умолчанию у браузера установлены такие же базовые значения.
То есть если задать font-size:100%; то нечего не изменится, так как это и есть базовое значение браузера. Чтобы увеличить шрифт то нам нужно увеличивать проценты 120%, 140% и т.д. И соответственно чтобы уменьшить нужно, уменьшать проценты.
Точно так же и для единиц em: если задать 1.1em то шрифт немного увеличится и это будет, равняется 110%. Как проценты %, так и единица em хорошо масштабируется и есть мнения, что проценты % масштабируются мягче.
Следующее единица это пиксели px. С этой единицей размера шрифта в основном и работают. Как вы знаете пиксели это точки экрана, количество которых и определяет его разрешение. Так вот, базовый размер шрифта составляет 16px.
Следующие две единицы измерения применяются, судя по всему, очень редко и я их ни разу не встречал - это Пункты: pt; они привязаны к дюймам и 1pt = 1,72дюйма и в миллиметрах это будет 0,35мм то есть 10pt = 3,5мм.
И последний вариант - это ключевые слова, так же крайне редко используется и с помощью слов small маленький и large большой указывается размер шрифта. Как по мне это достаточно не удобный способ, так как не особо понятно, насколько шрифт увеличивается или уменьшается.
Вы же можете выбрать для себя любую единицу измерения, которая покажется наиболее удобной для Вас, я же пользуюсь в основном пикселями и процентами. Ниже будет показано, как создавать свойства для изменения размера шрифта, используя выше перечисленные единицы.
p{
font-family:"Verdana" ,sans-serif;
font-size:120% ;
}
p{
font-family:"Verdana" ,sans-serif;
font-size:1.3em ;
}
p{
font-family:"Verdana" ,sans-serif;
font-size:22px ;
}
p{
font-family:"Verdana" ,sans-serif;
font-size:15pt ;
}
p{
font-family:"Verdana" ,sans-serif;
font-size:small ;
}
Вот с помощью таких условий можно изменять размер шрифта, а мы идем дальше где разберем следующие свойства шрифтов.
CSS