Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки (Стори, Уолтер) - страница 67

На первую страницу

>

>

>


Мы рассмотрим некоторые основы в начале каждого раздела, но потом перейдем к более продвинутым техникам, так что, пожалуйста, будьте к нам снисходительны. Мы откроем различные способы стилизовать простую страницу, представленную выше, попутно изучая всякие свойства CSS3. Готовы? Тогда приступим.

Веб-типографика и техники работы с текстом

До сегодняшнего дня Web был скуден в оформлении. Пока мы не обратились к методам замены изображений с их преимуществами и недостатками, мы были привязаны к некоторому ограниченному набору базовых шрифтов в операционных системах, существовавших с незапамятных времен. Хотя проблема была вовсе не в шрифтах. У нас был недостаточно тонкий контроль за разметкой текста и лигатурами.

Но CSS3 меняет все. У вас никогда не было лучшего повода отойти от базовых шрифтов и расширить горизонты оформления. Перейдем к теме о том, как добавить ритма в вашу типографику с помощью величины шрифта в относительных единицах rem, эксперимента с новыми шрифтами, контролем переноса слов, и как полностью улучшить ваш текст. Тем не менее самый важный элемент на странице – это все-таки текст, и он заслуживает особого внимания.

Представляем REM

Если у вас есть некоторый опыт с работы с тянущимися макетами, то наверняка вы пользовались единицами em. В силу того что em – это краеугольные камни адаптивного веб-дизайна, их использование может бытьсложным. Они основываются на размере текущего шрифта элемента (или его родительского элемента в случае >font-size), поэтому тут нужно вспомнить математику, чтобы рассчитать размер >1 em. Но будем смотреть правде в глаза, математику любят не все.

Новая единица >rem (“root em”) – близкий родственник >em, с теми же плюсами, только более легкая в использовании. Величина rem устанавливается по размеру шрифта в корневом элементе (это тег > для языка HTML). Поэтому 1 rem всегда одного размера, и неважно, где вы ее ставите в документе.

Чтобы rem, как и пиксели, было проще использовать, вы можете установить размер шрифта элемента > в 62,5 %, который будет пересчитан в >10 px, если только пользователь не настроил размер шрифта по умолчанию.

Теперь, когда вы задаете длину в rem, вы можете просто умножить на 10, чтобы получить величину в пикселях. Так как 10 пикселей может быть слишком мало для основного текста, вы можете настроить какой хотите размер rem в элементе >. Потом эту величину унаследуют все элементы. Например, если вы хотите, чтобы размер текста «тела» был 15 пикселей, можете сделать следующее:

Следующая страница