Содержание

font-style | htmlbook.ru

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

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

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

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

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

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

Браузеры

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

Браузеры текст со значением oblique всегда отображают как курсив (italic).

htmlbook.ru

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

Песочница

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

Пример

<!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.

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

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

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

Объект.style.fontStyle

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

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

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

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

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

webref.ru

font-style — курсивный шрифт (наклонный текст)

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

Курсив — это вид начертания, при котором символы написаны под наклоном и иногда имеют дополнительные засечки.

В CSS можно задать курсивный шрифт, используя свойство font-style со значением italic. Однако не во всех шрифтах предусмотрен курсив, и вместо него можно увидеть лишь наклонные символы. Такие символы также наклонены вправо, но при этом браузер не использует специально разработанный набор символов, а просто наклоняет стандартный шрифт, то есть визуально это будет выглядеть как просто наклонный текст.

Чтобы получить наклонный текст, вы также можете использовать свойство font-style, задав для него значение oblique.

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

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontStyle=»italic»

Синтаксис

font-style: normal|italic|oblique|inherit;

Значения свойства

Значение Описание
normal Браузер отображает стандартный шрифт.
italic Устанавливает курсивный шрифт.
oblique Определяет наклонный текст.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Изменение стиля в один клик!

Попробуйте поменять стиль шрифта, изменив значение свойства.

div {
font-style: normal;
}

puzzleweb.ru

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

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

Google Fonts подключим веб-шрифты на наши страницы.

Для привлечения внимания посетителей Вашего сайта вы можете придать привлекательный вид текстовому содержимому страниц. Для этих целей в CSS существует большое количество разнообразных свойств форматирования: шрифт текста, его цвет, размер, межстрочный интервал и так далее. В первую очередь рассмотрим методы работы с существующими шрифтами (безопасные веб-шрифты).

Безопасные веб-шрифты

В CSS стиле для выбора типа шрифта применяется свойство font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт

Courier. В этом случае Вам необходимо будет создать, например, селектор типа и воспользоваться свойством font-family:

p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}

Главная особенность данного способа заключается в том, что он будет работать, при условии, что у посетителя установлен подобный шрифт, иначе, страница будет отображена с использованием шрифта «встроенного» в браузер.

Так как вы заранее не знаете, есть у пользователя тот, или иной шрифт, то рекомендуется указывать не только основной шрифт, но и пару запасных (альтернативных) шрифтов, для того случая если у пользователя отсутствует основной шрифт.

Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Свойство font-family</title>
<style> 
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный  serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
	<body>
		<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
		<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
	</body>
</html>

В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).

Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

Ниже я перечислю некоторые часто используемые комбинации безопасных веб-шрифтов, которые с большой вероятностью присутствуют на любом компьютере:

sans-serif (без засечек)
Семейство шрифта (font-family)Пример
Arial, Helvetica, sans-serifСъешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serifСъешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serifСъешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serifСъешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serifСъешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serifСъешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serifСъешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serifСъешь же еще этих сочных мандаринов.

serif (с засечками)
Семейство шрифта (font-family)Пример
Georgia, serifСъешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serifСъешь же еще этих сочных мандаринов.
«Times New Roman», Times, serifСъешь же еще этих сочных мандаринов.

monospace (моноширинные)
Семейство шрифта (font-family)Пример
«Courier New», Courier, monospaceСъешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospaceСъешь же еще этих сочных мандаринов.

Типы веб-шрифтов и их поддержка браузерами

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

  • TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
  • WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
  • WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
  • SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
  • EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Ответственность и поиск веб-шрифтов

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

Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».

Добавление веб-шрифта на страницу

Для добавления шрифта на страницу Вам необходимо:

  • использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
  • использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).

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

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:

  3. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):

  4. После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:

  5. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

  • одну плотность шрифта.
  • один стиль для этого шрифта.

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!

Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования правила @font-face</title>
<style> 
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Regular.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
 /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор  */
src: url("/fonts/Roboto-Bold.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: bold;  /* определяет жирное начертание символов */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Italic.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: italic;  /* указываем, что стиль шрифта курсивный */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h3>Немного о пандах</h3>
	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>

И так, что мы сделали в этом примере:

  • Добавили три правила @font-face в начало наших CSS стилей (это важно).
  • В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
  • В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
  • Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
  • Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
  • Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: 
	local("font");  /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
	url("/fonts/font.woff2") format('woff2');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.woff") format('woff');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format) */
}

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

Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.

В настоящее время с некоторыми браузерами могут возникать проблемы при использовании директивы local, которая служит для проверки наличия шрифта (по определенном имени) на локальном компьютере пользователя, по этой причине я не рекомендую Вам использовать её в своих проектах, для этих целей более надежным является использование скриптов.

Добавление веб-шрифта со стороннего ресурса

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

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
  3. После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
  4. Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»

    Например, меня интересуют следующие:

  • Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
  • Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

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

  • Следующим шагом необходимо выбрать те наборы символов (языки), которые будете использовать на своем сайте (выбор языков находится в том же вкладке — «Customize» немного ниже). В данном случае выбраны кириллические и латинские символы. Выбирайте только те наборы, которые вам необходимы, чтобы Ваши страницы загружались быстрее:
  • Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):

    • Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).

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

    Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).

    Необходимое наименование шрифта и альтернативный вариант так же указывается в описании:

    Рассмотрим пример подключения, выбранных нами шрифтов:

    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя тег <link></title>
<link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */
<style>
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о верблюдах</h3>
		<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
	</body>
</html>

    Результат:

    Рис.44 Пример подключение веб-шрифтов, используя тег <link>.

    Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.

    Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url и заключить путь к CSS файлу в круглые скобки. Допустимо заключить содержимое в скобках в кавычки:

    @import url("path/to/file.css");

    Предлагаемый вариант импортирования на страницу:

    Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).

    Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:

    <!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя правило @import</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о пингвинах</h3>
		<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) —  семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
	</body>
</html>

    Результат нашего примера:

    Рис.46 Пример подключение веб-шрифтов, используя правило @import.

    Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

    Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.


    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

    • Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:

      Практическое задание № 10.

    • Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:

      Практическое задание № 11.

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


    basicweb.ru

    Создание жирного и курсивного шрифта средствами CSS

    Продолжаем работать со шрифтами и в этом уроке мы рассмотрим то, как задаются свойства придающие шрифту жирный или курсивный вид. До этого мы уже рассматривали, как создать жирный или курсивный шрифт с помощью HTML тегов. Но как мы уже знаем, HTML не должен использоваться для оформления документа, он предназначен только для создания разметки, структуры страницы, поэтому надо оформлять все через таблицу стилей CSS. И теперь давайте рассмотрим, как задаются такие свойства.

    Курсивный шрифт CSS

    Оформлять текст курсивом помогает свойство font-style: ;, которому прописывается значение italic, что обозначает «Стиль шрифта — курсивный».

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

    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>


    Первый абзац Первый абзац Первый абзац Первый абзац
    

    Второй абзац Второй абзац Второй абзац Второй абзац
    

    Третий абзац Третий абзац Третий абзац Третий абзац
    

    Четвертый абзац Четвертый абзац Четвертый абзац
    

    Пятый абзац Пятый абзац Пятый абзац Пятый абзац
    

</body>
</html>

    Задаем свойство для курсивного шрифта.

    CSS

    .italic{
    font-style: italic;
}

    Если Вы создали такие абзацы и задали для них свойство, то у второго абзаца текст стал курсивным. Это мы задали свойство для всего абзаца, а теперь давайте усложним и зададим курсив только для двух слов в четвертом абзаце. Как такое сделать? В HTML уроке мы разбирали тег логического уровня <span>. Данный тег как раз используется для таких ситуаций, когда для какой-то части элемента нужно задать какой-то класс. И так в четвертый абзац встраиваем тег <span> </span> и ему прописываем класс <span class=«italic»></span>. В результате получаем вот такую запись:

    HTML

    Первый абзац Первый абзац Первый абзац Первый абзац
    

    Второй абзац Второй абзац Второй абзац Второй абзац
    

    Третий абзац Третий абзац Третий абзац Третий абзац
    

    Четвертый абзац Четвертый абзац Четвертый абзац
    

    Пятый абзац Пятый абзац Пятый абзац Пятый абзац

    CSS

    .italic{
    font-style: italic;
}

    Теперь второй абзац и часть четвертого абзаца отображаются курсивом. В демо это наглядно показано.

    Жирный шрифт CSS

    Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ; другими словами его еще называют насыщенностью шрифта. Изначально насыщенность установлена в значение normal то есть насыщенность шрифта нормальная, а задав значение bold он примет полужирный вид.

    CSS

    .bold{
    font-weight:bold ;
}

    Так же можно задавать значение насыщенности цифрами от 100 до 900 с шагом 100. Значение normal приравнивается цифре 400, а значение bold цифре 700. Значение 900 поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700. Выглядит такое условие следующим образом.

    CSS

    .bold{
    font-weight:700 ;
}

    В html коде поступают точно также: если нужно выделить весь абзац то задаем ему новый класс, если часть текста, то используем тег <span class=«italic»></span>. Рассмотрим маленький пример:

    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>


    Первый абзац Первый абзац Первый абзац Первый абзац
    

    Второй абзац Второй абзац Второй абзац Второй абзац
    

    Третий абзац Третий абзац Третий абзац Третий абзац
    

    Четвертый абзац Четвертый абзац Четвертый абзац
    

    Пятый абзац Пятый абзац Пятый абзац Пятый абзац
    

</body>
</html>

    CSS

    .bold{
    font-weight: bold;
}

    В результате мы выделили в жирный текст часть четвертого абзаца, где он в то же время и курсивный, и весь пятый абзац. Вот такие еще два свойства мы изучили. Они достаточно часто используются, поэтому стоит запомнить, что:

    • Курсивный шрифт задается: font-style:italic;.
    • Жирный шрифт задается: font-weight:bold;.
    • Для возврата шрифту нормальной насыщенности устанавливается значение: font-weight:normal; или значение font-weight:400;, что в данном случае означает одно и тоже.

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


    webteoretik.ru

    cвойства текста и шрифтов в CSS с примерами.

    CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.

    Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.

    Каждое правило CSS состоит из селектора и определения. Селектор — обычно это тег, к которому мы применяем наш стиль, а определение — это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство — цвет, значение — красный.

    Синтаксис CSS следующий:

    селектор { свойство: значение }

    Пример правила CSS:

    p { color: blue }

    В этом примере задано правило тегу <p> отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство : значение).

    p { color: blue; font-size: 10pt }

    В этом примере задано правило тегу <p> отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство : значение) применённые к одному селектору, в данном случае к тегу абзаца <p>.

    В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS.

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

    Свойство font-family
    СвойствоЗначениеОписаниеПример
    font-familyимя шрифтаУстанавливает шрифт из спискаP {font-family: Arial, sans-serif}

    Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

    Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

    Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.

    Универсальные семейства шрифтов:

    • serif — антиквенные шрифты (шрифты с засечками), типа Times;
    • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
    • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
    • fantasy — семейство декоративных шрифтов;
    • cursive — семейство курсивных шрифтов;

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

    <!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-family</title>
	<style>
		h2 { font-family: Arial, sans-serif }
		h3 { font-family: Georgia, Times, serif }
	</style>
</head>
<body>
	<h2>Заголовок h2</h2>
	<h3>Заголовок h3</h3>
</body>
</html>

    Следующее свойство:

    Свойство font-style
    СвойствоЗначениеОписаниеПример
    font-stylenormal
    italic
    oblique    		Нормальный шрифт
    Курсив
    Наклонный шрифт    		P {font-style: oblique}

    Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

    <!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-style</title>
</head>
<body>
<p>Пример нормального шрифта.</p>
<p>Пример курсива.</p>
<p>Пример наклонного шрифта.</p>
</body>
</html>

    Видно что курсив от наклонного шрифта внешне не отличается.

    Следующее свойство:

    Свойство font-variant
    СвойствоЗначениеОписаниеПример
    font-variantnormal
    small-caps    		Устанавливает капитель (особые прописные буквы)P {font-variant: small-caps}

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

    <!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-variant</title>
</head>
<body>
	<p>Обычный текст.
	<span>Текст капителью</span>.</p>
	<p>Опять обычный текст.</p>
</body>
</html>

    Следующее свойство:

    Свойство font-weight
    СвойствоЗначениеОписаниеПример
    font-weightnormal
    lighter
    bold
    bolder
    100–900
    		Нормальная жирность
    Светлое начертание
    Полужирный
    Жирный
    100 — светлый шрифт,
    900 — самый жирный    		P {font-weight: bolder}

    Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold — полужирное начертание, normal — нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, — значению 700.

    Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

    Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

    <!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-weight</title>
</head>
<body>
	<p>Обычный текст. <span>Текст bold</span>.</p>
	<p>Опять обычный текст.</p>
</body>
</html>

    Следующее свойство:

    Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.

    Свойство font-size
    СвойствоЗначениеОписаниеПример
    font-sizenormal
    pt
    px
    %
    		нормальный размер
    пункты
    пикселы
    проценты    		font-size: normal
    font-size: 11pt
    font-size: 11px
    font-size: 110%

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

    Для изменения размера текста относительно родителя используется другой набор констант (larger — увеличивает размер относительно родительского, smaller — уменьшает размер).

    <!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-size.</title>
</head>
<body>
	<p>Обычный текст.</p>
	<p>Текст xx-small.
	<span>Текст larger</span>.</p>
	<p>Текст small.</p>
	<p>Текст medium.</p>
	<p>Текст large.</p>
	<p>Текст x-large.</p>
	<p>Текст xx-large.</p>
	<p>Опять обычный текст.</p>
	<p>Текст 150%.</p>
	<p>Текст 15px.
	<span>Текст larger</span>.</p>
</body>
</html>

    Свойства текста

    Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.

    Рассмотрим первое свойство:

    Свойство line-height
    СвойствоЗначениеОписаниеПример
    line-heightnormal
    множитель
    значение
    %    		Межстрочный интервал (интерлиньяж)line-height: normal
    line-height: 1.5
    line-height: 12px
    line-height: 120%

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

    <!DOCTYPE html>
<html>
<head>
	<title>Работа с межстрочным интервалом</title>
</head>
<body>
	<p>Обычный текст. Первая строка.
	<br>Вторая строка.
	<br>Третья строка.</p>
	<p>Изменённый текст. Первая строка.
	<br>Вторая строка.
	<br>Третья строка.</p>
</body>
</html>

    При процентной записи за 100% берется высота шрифта.

    Следующее свойство:

    Свойство text-decoration
    СвойствоЗначениеОписаниеПример
    text-decorationnone
    underline
    overline
    line-through
    blink    		Убрать все оформление
    Подчеркивание
    Линия над текстом
    Перечеркивание
    Мигание текста    		text-decoration: line-through

    При помощи определения { text-decoration: none } можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

    <!DOCTYPE html>
<html>
<head>
	<title>Работа с свойством text-decoration.</title>
	<style>
		a { text-decoration: none }
	</style>
</head>
<body>
	<p>Поисковик <a href="http://google.com">Google</a>.</p>
</body>
</html>

    В примере ссылка не имеет линии подчёркивания.

    Следующее свойство:

    Свойство text-transform — управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения.

    Свойство text-transform
    СвойствоЗначениеОписаниеПример
    text-transformnone
    capitalize
    uppercase
    lowercase    		Убрать все эффекты
    Начинать С Прописных
    ВСЕ ПРОПИСНЫЕ
    все строчные    		text-transform: uppercase

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

    <!DOCTYPE html>
<html>
<head>
	<title>Работа с свойством text-transform.</title>
</head>
<body>
	<p>Текст none.</p>
	<p>Текст capitalize.</p>
	<p>Текст uppercase.</p>
	<p>Текст lowercase.</p>
</body>
</html>

    Сравните текст который содержится в html-коде с текстом в окне браузера.

    Следующее свойство:

    Свойство text-align — служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

    Свойство text-align
    СвойствоЗначениеОписаниеПример
    text-alignleft
    right
    center
    justify    		Выравнивание текстаtext-align: right

    Подробное описание значений:

    • center — текст выравнивается по центру.
    • justify — выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
    • left — выравнивание по левопу краю. Это значение используется по умолчанию.
    • right — выравнивание по правому краю.

    Пример использования этого свойства будет совмещён с примером работы следующего свойства.

    Следующее свойство:

    Свойство text-indent — служит для создания величины отступа первой строки блока текста (например, для абзаца <p>).

    Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

    Свойство text-indent
    СвойствоЗначениеОписаниеПример
    text-indentзначение
    %    		Отступ первой строкиtext-indent: 15px;
    text-indent: 10%
    <!DOCTYPE html>
<html>
<head>
	<title>Работа со свойствами text-align и text-indent.</title>
	<style>
		p { text-indent: 15px }
	</style>
</head>
<body>
<p>Работа со свойствами text-align и text-indent.
Для лучшего понимания работы кода откройте страницу
в новом окне и уменьшите его размер.</p>
</body>
</html>

    komotoz.ru

    CSS/HTML: Каков правильный способ сделать текст курсивом? — html

    Каков правильный способ сделать текст курсивом? Я видел следующие четыре подхода:

    <i>Italic Text</i>

<em>Italic Text</em>

<span>Italic Text</span>

<span>Italic Text</span>

    Это «старый способ». <i> не имеет смыслового значения и только передает эффект презентации текста курсивом. Насколько я вижу, это явно неправильно, потому что это не семантично.

    Это использует семантический знак для чисто презентационных целей. Просто случается, что <em> по умолчанию выделяет текст курсивом, поэтому его часто используют те, кто знает, что <i> следует избегать, но которые не знают его семантического значения. Не весь курсивный текст выделен курсивом, потому что он подчеркивается. Иногда это может быть полная противоположность, как побочная заметка или шепот.

    Для размещения презентации используется класс CSS. Это часто рекламируется как правильный путь, но опять-таки это кажется мне неправильным. По-видимому, это не означает более семантического значения, которое <i>. Но, его сторонники плачут, гораздо легче изменить весь ваш курсивный текст позже, если вы, скажем, захотите его полужирным шрифтом. Но это не так, потому что тогда мне останется класс под названием «курсив», который отобразит текст жирным шрифтом. Кроме того, непонятно, почему я когда-либо хотел бы изменить весь курсивный текст на своем веб-сайте или, по крайней мере, мы можем думать о случаях, когда это нежелательно или необходимо.

    Используется класс CSS для семантики. Пока что это лучший способ, но на самом деле у него две проблемы.

    • Не весь текст имеет достаточный смысл, чтобы гарантировать семантическую разметку. Например, выделен курсивом текст внизу страницы на самом деле сноска? Или это в стороне? Или что-то еще. Возможно, это не имеет особого значения, и нужно только выделить курсивом, чтобы отделить его от текста, предшествующего ему.

    • Семантическое значение может измениться, если оно отсутствует в достаточной силе. Допустим, я пошел с «сноской», основанной не более чем на том, что текст находится внизу страницы. Что произойдет, когда через несколько месяцев я хочу добавить еще текст внизу? Это уже не сноска. Как мы можем выбрать семантический класс, который менее общий, чем <em>, но избегает этих проблем?

    Похоже, что требование семантики кажется чрезмерно обременительным во многих случаях, когда желание сделать что-то курсивное не означает, что оно несет семантический смысл.

    Кроме того, желание отделить стиль от структуры привело к тому, что CSS был рекламирован как замена <i>, когда бывают случаи, когда это было бы фактически менее полезным. Таким образом, это оставляет меня обратно с скромным тегом <i> и задается вопросом, является ли этот ход мысли причиной, по которой он оставлен в спецификации HTML5?

    Есть ли хорошие сообщения в блоге или статьи на эту тему? Возможно, те, кто участвует в решении сохранить/создать тег <i>?

    qaru.site

    No related posts.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *