Размеры шрифтов на веб-страницах играют ключевую роль в создании удобочитаемого и эстетически приятного контента. Выбор правильных единиц измерения для задания размеров шрифтов является важным шагом в веб-разработке.
Иногда возникает потребность создать кнопки, которые будут увеличивать или уменьшать размер шрифта при помощи JavaScript. Хотя в браузерах часто есть горячие клавиши для изменения масштаба, такие как Ctrl++, они изменяют размер всей страницы, включая изображения и другие элементы, что может быть неудобно. Как быть, если нужно изменить только размер шрифта, чтобы обеспечить более комфортное чтение?
Для этого обычно используются единицы измерения em и %. Однако при вложенных элементах, таких как в примере с вложенным списком <li>, применение em или % может вызвать проблемы:
<style>
li {
font-size: 0.8em;
}
</style>
<ul>
<li>Лошадь
<ul>
<li>может быть
<ul>
<li>грациозной
<ul>
<li>только
<ul>
<li>или
<ul>
<li>могущественной
<ul>
<li>в зависимости от характера</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Здесь каждый вложенный <li> получает размер шрифта 80% от размера его родителя, что может сделать текст нечитаемым.
Для решения этой проблемы предлагается использовать единицу rem, которая устанавливает размер шрифта относительно размера шрифта элемента <html>. Это позволяет избежать проблем с вложенными элементами:
<style>
html {
font-size: 14px;
}
li {
font-size: 0.8rem;
}
</style>
<ul>
<li>Лошадь
<ul>
<li>может быть
<ul>
<li>грациозной
<ul>
<li>только
<ul>
<li>или
<ul>
<li>могущественной
<ul>
<li>в зависимости от характера</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Таким образом, базовый размер шрифта для <html> установлен на 14px, а размер шрифта для <li> устанавливается в 80% от базового размера при помощи rem.
Дополнительно, можно добавить интерактивность с помощью JavaScript, чтобы создать кнопку "Шрифт больше", которая динамически увеличивает размер шрифта элемента <html> на 2px при каждом нажатии:
<script>
let html = document.documentElement;
up.onclick = function() {
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>
Таким образом, использование rem позволяет более гибко управлять размером шрифта, а JavaScript добавляет функциональность для динамического изменения размера шрифта по запросу пользователя.
А теперь давайте погрузимся в более интересныый пример.
<style>
html {
font-size: 14px;
}
li {
font-size: 0.8rem;
}
</style>
<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
<img src="https://cnnespanol.cnn.com/wp-content/uploads/2018/08/caballos-riendo-expresiones-faciales.jpg?quality=100&strip=info">
<ul>
<li>Лошадь
<ul>
<li>может быть
<ul>
<li>грациозной
<ul>
<li>только
<ul>
<li>или
<ul>
<li>могущественной
<ul>
<li>в зависимости от характера</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
// при помощи JS увеличить размер шрифта html на 2px
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>
Таким образом, использование JavaScript позволяет динамически управлять размером шрифта, создавая интерактивный пользовательский опыт на основе заданных стилей.
Важный факт: Помимо удобства использования rem для размеров шрифта, следует отметить, что эта единица также обладает преимуществом в том, что она не зависит от размера шрифта родительского элемента, в отличие от em. Это делает rem особенно полезным для создания стабильных и предсказуемых размеров шрифта в проектах с различной вложенностью элементов.
Пример:
<style>
html {
font-size: 16px; /* Установка базового размера шрифта */
}
h1 {
font-size: 2rem; /* Размер заголовка в два раза больше базового */
}
</style>
В этом примере размер заголовка h1 устанавливается в два раза больше базового размера шрифта <html>, что делает его более читаемым и предсказуемым для пользователя.
При создании динамических и адаптивных веб-страниц, где важно поддерживать читаемость при изменении размеров шрифтов, использование rem является эффективным решением. Эта единица измерения не только предоставляет удобство в управлении размерами, но и обеспечивает стабильность в различных частях проекта.
Будьте первым