Свойства шрифта

Возможность управлять шрифтом - меняете ли вы его семейство, кегель или толщину - позволяет увеличить блеск и неповторимость WEB-страниц.

Метрические атрибуты шрифта. Шрифтам в проектировании сайта необходимо уделять особое внимание. Т.к. пользователи используют различные браузеры - некоторые шрифты могут не отображаться вообще. Для кириллических шрифтов наиболее пригодны всего три семейства шрифтов - serif (обычно Times или другой шрифт с засечками), sans-serif - (Arial, Helvetica или другой шрифт без засечек) и monospace - (Courier). Управлять свойствами шрифта в таблицах стилей можно применяя следующие атрибуты:
font-family: - указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.
В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений - serif, san-serif, cursive, fantasy, monospace, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.

 

Пример:
font-family:" Times New Roman",sans-serif;    <!--имя шрифта, без засечек-->

font-weight - задает "жирность" шрифта, используемого в элементе страницы.
"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.
font-weight: normal; - обычный;
font-weight: lighter; - светлее;
font-weight: bold; - жирный;
font-weight: bolder; - жирнее;
font-weight: от 100 до 900 - любое значение, кратное 100 (200,700).

Пример:
font-weight: normal;    <!--жирность - обычный-->

font-size - задает размер шрифта, используемого в элементе страницы.
Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя.
font-size: 200% - относительная величина (проценты)
font-size: 150px - размер в пикселях
font-size: 300pt - размер в пунктах
Также доступны девять определенных значений.
font-size: {xx-small, x-small, small, medium, large, x-large, xx-large} - задают один из семи размеров шрифтов, поддерживаемых HTML
font-size: {smaller, larger} - задают размер шрифта, который на размер либо больше, либо меньше родительского шрифта соответственно

Пример:
font-size: 12pt;    <!--12 пунктов-->

font-style - задает начертание шрифта.
font-style: normal; - задает обычный вид шрифта (используется по умолчанию);
font-style: italic - курсивное начертание;
font-style: obligue - наклонное начертание (легкий наклон нормального шрифта)

Пример:
font-style: italic;    <!--курсив-->

font-variant - задает вид малых букв шрифта, используемого в элементе страницы.
font-variant: normal; - задает обычный вид малых букв шрифта (используется по умолчанию);
font-variant: small-caps; - делает их такими же, как большие буквы, только меньшего размера (капитель).

Пример:
font-variant: normal;    <!--обычный вид-->

font - задает параметры шрифта элемента страницы.
Заменяет атрибуты font-family, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.
Значение по умолчанию - "Times New Roman", medium, normal, normal, normal

font-family  

Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке.

Значение:

* имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
* имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.
* inherit - применяется значение родительского элемента.

p {font-family: "Times roman", courier, serif}

Примеры: [1]
font-style  

Определяет начертания шрифта, такие как курсив или наклонное.

Значение:

* normal - обычное начертание (по умолчанию).
* italic - курсив.
* oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
* inherit - применяется значение родительского элемента.

p{font-style: italic; }

Примеры: [1]
font-variant  

Определяет, будет ли шрифт выведен в виде малых прописных букв.

Значение:

* normal - обычное начертание (по умолчанию).
* small-caps - выводит шрифт в виде малых прописных букв.
* inherit - применяется значение родительского элемента.

p {font-variant: small-caps }

Примеры: [1]
font-weight  
cвойства шрифта font css

Определяет толщину выводимого шрифта.

Значение:

* normal - обычное начертание (по умолчанию).
* bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
* bolder - жирный шрифт.
* lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
* 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
* inherit - применяется значение родительского элемента.

p {font-weight: bold;}

Примеры: [1]
font-stretch  

Определяет толщину шрифта.

Значение:

* normal - обычная ширина (по умолчанию)
* wider- увеличение текущей ширины.
* narrower - уменьшает текущую ширину на единицу.
* ultra-condensed - наименьшее значение ширины.
* extra-condensed - значение большее, чем предыдущее
* condensed - значение большее, чем предыдущее.
* semi-condensed - значение большее, чем предыдущее.
* semi-expanded - значение большее, чем при обычной толщине.
* expanded - значение большее, чем предыдущее.
* extra-expanded - значение большее, чем предыдущее.
* ultra-expanded - максимальное значение ширины.
* inherit - применяется значение родительского элемента.

body{ font-stretch: condensed }

Примеры: [1]
font-size  

Определяет кегель (высоту символов) шрифта.

Значение:

* абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
* относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
* любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается.
* любое соответствующее стандарту процентное значение.
* inherit - применяется значение родительского элемента.

p{font-size: 20px}

Примеры: [1]
cвойства шрифта font css
font-size-adjust  

Определяет соотношение ширины и высоты символов, которые поддерживается при установке кегля шрифта. Это дает пользователю регулировать изменения высоты текста.

Значение:

* none - по умолчанию.
* любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
* inherit - применяется значение родительского элемента.

p {font-size-adjust: 0.45}
font  

Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.

Значение:

* font-style - начертание.
* font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
* font-weight- толщина.
* font-size - кегль.
* line-height - интерлиньяж.
* font-family - семейство шрифтов.
* inherit - применяется значение родительского элемента.

p {font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Примеры: [1]
cвойства шрифта font css
Внедрения индивидуальных шрифтов.  

До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:

@font-face {font-family: fontName; src: url('/failMame.eot') }

значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:
<style>
@font-face{ font-family: demoFont; src: url(http://myweb.ru/superFont.eot)}
H1 {font-family: demoFont, Arial, sans-serif;}
</style>
<h1> Текст отображается с использованием загружаемого шрифта </h1>

после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.