cвойства шрифта font css


CSS

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

меню

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

cвойства шрифта font css

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

Метрические атрибуты шрифта.

      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 для воспроизведения элемента.

На верх Написать письмо WEB-мастеру Печать Добавить в избранное Cделать стартовой