Настраиваем шрифты на сайте

Рейтинг: 0 Голосов: 0 7770 просмотров
Настраиваем шрифты на сайте

 

Шрифты на сайтах 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  - это ширина, то что полужирный, при этом можно указать разные варианты. 
 
Первую статью заканчиваю, ибо будет трудно воспринять, через час будет продолжение.

Похожие статьи:

Seo статьиПравильная работа с InstantVideo на сайте

Секреты CSSШрифты на сайте - 2

Как создавать сайтЗаработок на сайте. Реальность и ожидания.

Комментарии (0)

Нет комментариев. Ваш будет первым!

Голосуем

Самый нужный компонент