Шрифты на сайтах InstantCMS. Структура и настройка.
Структура шрифтов шаблонов InstantCMS.
Немного о шрифтах на сайте из личного опыта. Обычно я стараюсь писать то, что у меня спрашивают в аське или в агенте, исходя из того, что раз я с этим столкнулся при создании сайта, и если меня спросили, значит этот вопрос может возникать у других и собственно возможно этот пост поможет.
За шрифты и их размер отвечает находящийся в папке css файл text.css Вот его код, который идет в стандарте
body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:0px}
тут все достаточно понятно. Чтобы понять из чего складываются шрифты на сайте, надо посмотреть несколько вещей, во первых сам text.css затем перейти в styles.css и там глянуть что указано в body, обычно в самом начале стиля находится body и идет определение стиля для него. Если там не указан шрифт, его размер, то он берется с стиля текста.
Но стандартные это и есть стандартные, обычно дизайнеры шаблонов немного меняют размер шрифтов и собственно сам шрифт. Особенно многое в этом плане делает Dezerit, у него очень интересные решения с шрифтами.
Дальше структура шрифтов может меняться если при определении стилей той или иной позиции указан шрифт и его размер, тогда помещенные в эту позицию модули будут отображаться с тем шрифтом и размером, который указан в определении стиля модуля. Вот например как это может выглядеть.
Позиция Left
Стиль можно определить тремя переменными или двумя, то есть либо выделить весь модуль сам по себе и заголовки
left.module (определение стиля всей позиции) left.moduletitle (определение стиля заголовков модуля) и left.modulebody (определение стиля тела модулей в этой позиции)
Так по любой позиции, подчеркну что не отдельного модуля а позиции, в которую можно установить сколько угодно модулей.
Если вы в каждом определении, например заголовка и тела модуля будете указывать шрифт и размер, то соответственно они будут показываться исходя из этого, уже text.css тут задействован не будет, если указан шрифт в стиле в боди, то он тоже останется побоку.
Свойства шрифтов
font
Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
font-size
Определяет размер шрифта элемента.
font-style
Определяет начертание шрифта — обычное, курсивное или наклонное.
font-variant
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера.
font-weight
Устанавливает насыщенность шрифта.
Примеры
Если надо прописать кратко можно использовать просто Font будет вот так: font: bold 16px/1.5 Veranda, sans-serif
Тут прописывается размер шрифта, расстояние между строками, сам шрифт. Bold - это ширина, то что полужирный, при этом можно указать разные варианты.
Первую статью заканчиваю, ибо будет трудно воспринять, через час будет продолжение.
Похожие статьи:
Как создавать сайт → Заработок на сайте. Реальность и ожидания.