Css html font: font — CSS: Cascading Style Sheets

Разное 

font | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюЗависит от использования
НаследуетсяДа
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/fonts.html#propdef-font

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

inherit
Наследует значение родителя.

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Примеры использования

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .layer1 {
    font: 12pt sans-serif;  
   } 
   h2 {
    font: 200% serif;
   }
  </style>
 </head>
 <body> 
  <div>
  <h2>Duis te feugifacilisi</h2>
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
  feugat nulla facilisi.
 
 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

Объектная модель

[window.]document.getElementById(«elementID»).style.font

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Шрифт

CSS по теме

Статьи по теме

  • Главная страница

Рецепты CSS

font-style | CSS | WebReference

Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста.

Краткая информация

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

font-style: normal | italic | oblique
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.
<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

normal italic oblique

div {
  font-style: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font-style</title> <style> h2 { font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */ } p { font-family: ‘Times New Roman’, Times, serif; /* Шрифт с засечками */ font-style: italic; /* Курсивное начертание */ } </style> </head> <body> <h2>Культурный памятник Средневековья</h2> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.
</p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-style

Объектная модель

Объект.style.fontStyle

Спецификация

СпецификацияСтатус
CSS Fonts Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

4121711
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст и шрифт

См. также

  • Наклон текста
  • Свойства шрифта в CSS

Рецепты

  • Как сделать курсивный текст?

Практика

  • Выравнивание заголовка таблицы
  • Курсивный текст

Как изменить шрифты в CSS

В прошлом мы использовали тег HTML для изменения семейства шрифтов, размера и других атрибутов. CSS делает это намного проще. Узнайте, как изменить семейство шрифтов и размер шрифта с помощью CSS, выполнив следующие шаги.

  1. Свойство font-family используется в CSS для указания имени шрифта, применяемого к элементу. Вы можете указать имя шрифта (например, Arial, Helvetica и т. д.) или категорию шрифта (например, курсив, фэнтези, моноширинный и т. д.). Чтобы указать семейство шрифтов для Arial, например, вы используете:
     p { семейство шрифтов: Arial; }
  2. Если шрифт Arial не был найден на компьютере конечного пользователя, браузер отобразит шрифт по умолчанию.
    Если вы обеспокоены тем, что имя шрифта, которое вы хотите использовать, может быть не найдено на компьютере пользователя, вы можете предоставить список вариантов, например:
     p { семейство шрифтов: Arial, Helvetica; }
    В этом случае браузер сначала будет искать Arial. Если он не найдет Arial, он будет искать Helvetica.
  3. Для большей безопасности вы можете указать пару определенных параметров семейства шрифтов, за которыми следует категория семейства шрифтов, например:
     p { font-family: Arial, Helvetica, sans-serif; }
    Таким образом, если ни Arial, ни Helvetica не найдены, браузер, по крайней мере, знает, что нужно использовать какой-нибудь шрифт без засечек. Вот пример кода:
     

<голова>
<мета-кодировка="UTF-8">
Семейство шрифтов
<тип стиля="текст/CSS">
тело { размер шрифта: большой; }
дел {
поле: 10 пикселей;
отступ: 10 пикселей;
граница: 1px сплошной черный;
}


<тело>
<дел>
Arial, Helvetica, без засечек
<дел> 'Times New Roman', Times, с засечками
<дел> семейство шрифтов: Courier New, Courier, моноширинный
<дел> Вердана
<дел> Комикс Санс МС
<дел> Крылья
Это выглядит так:
  • CSS позволяет нам указать, насколько большим или маленьким должен быть текст, используя размер шрифта . Вы можете использовать следующие единицы измерения: 900 32 900 34 %
    Единица измерения Описание
    пикселей пикселей
    точек точек
    дюймы дюймы
    см сантиметры
    мм миллиметры
    шт. Picas
    em Ems
    ex Exs
    Процент
    бэр бэр
  • Кроме того, можно определить размер шрифта используя следующие относительные термины: Размеры от xx-small до xx-large работают аналогично размерам шрифта от 1 до 7 в HTML, хотя они не совпадают точно. Термины «меньше» и «больше» изменяют размер шрифта элемента относительно размера шрифта его родительского элемента. Следующий код иллюстрирует это:
    

<голова>
<мета-кодировка="UTF-8">
Размер шрифта

<тело>
<дел>
Этот текст меньше и
еще меньше и
еще меньше
.

<дел>
Этот текст больше и
еще больше и
еще больше
.
    Приведенный выше код выведет следующее:

    • Большинство экспертов согласны с тем, что размер шрифта должен быть определен в относительных единицах (например, em, rem, % и т. д.) или в терминах (например, большой, маленький и т. д.). Это связано с тем, что абсолютные размеры шрифта могут сделать страницы недоступными для людей с плохим зрением. В большинстве браузеров пользователь может изменить как «масштаб» страницы, так и отдельно размер шрифта по умолчанию. В то время как «масштабирование» увеличит размер всех элементов (включая шрифт) на странице, изменение размера шрифта браузера по умолчанию не окажет никакого влияния на шрифты, размеры которых в CSS указаны с использованием абсолютных, а не относительных единиц.

    К сожалению, у использования относительно определенных размеров шрифта есть обратная сторона: у вас меньше контроля над дизайном. Это может привести к тому, что текст будет переноситься, когда вы этого не хотите, или ячейки таблицы будут расширяться сверх того, что вы намеревались.

    Как применить глобальный шрифт ко всему HTML-документу

    Иногда вы можете столкнуться с ситуацией, когда необходимо применить одно и то же семейство шрифтов и размер шрифта ко всему HTML-документу.

    В этом фрагменте мы собираемся применить глобальный формат шрифта ко всей HTML-странице.

    Здесь вы можете найти два примера, один из них с применением правила CSS !important.

      
    Заголовок
     

    Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. 

     
     HTML * {
  размер шрифта: 16px;
  высота строки: 1,625;
  цвет: #2020131;
  семейство шрифтов: Nunito, без засечек;
}

    Пример применения глобального шрифта ко всему HTML-документу: 

     

  <голова>
    Название документа
    <стиль>
      HTML * {
        размер шрифта: 16px;
        высота строки: 1,625;
        цвет: #2020131;
        семейство шрифтов: Nunito, без засечек;
      }
    
  
  <тело>
     
    Заголовок
     
    <р>
      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

    Попробуй сам »

    Если вам нужно убедиться, что ничто не может переопределить то, что установлено в этом стиле, используйте правило CSS !important. Он используется для игнорирования внутреннего форматирования текста, т. е. другие стили не могут перезаписывать стили с !important.

    Далее мы продемонстрируем пример, в котором мы используем правило !important для всех наших свойств CSS.

    Пример применения глобального шрифта ко всему HTML-документу с использованием правила !important: 

      <голова>Название документа <стиль> HTML * {
 размер шрифта: 16px !важно;
 высота строки: 1,625 !важно;
 цвет: #2020131 !важно;
 семейство шрифтов: Nunito, без засечек !важно;
 }   <тело>
    Заголовок
     <р> Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов.
    No related posts.
     
         Автор записи 
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *