Содержание

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



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

<i>Italic Text</i>

<em>Italic Text</em>

<span>Italic Text</span>

<span>Italic Text</span>

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

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

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

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

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

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

    <em> , но позволяет избежать этих проблем?

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

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

и задается вопросом, является ли этот ход мыслей причиной того, что он остался в спецификации HTML5?

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

html css semantic-markup
Поделиться Источник Rupert Madden-Abbott     21 января 2010 в 10:11

12 ответов

  • Как сделать текст значения в форме курсивом

    У меня есть скрипт, который стирает текст значения по умолчанию в форме, когда пользователь нажимает на поле, но как я могу сделать так, чтобы текст значения отображался курсивом? Если я изменю ввод в моем css на font-style:italic, то, когда пользователь печатает, он тоже появляется курсивом, и я…

  • CSS: как сделать текст курсивом между тегами img и br

    Вот с чем я боролся последние недели. Допустим, у меня есть следующий html (упрощенный пример кода) <img class=myimageclass /> This is some text <br /> Тогда моя проблема заключается в следующем: как я мог бы сделать текст между тегами img en br курсивом? Однако тексту перед тегом img…


216

Вы должны использовать разные методы для разных случаев использования:

  1. Если вы хотите подчеркнуть фразу, используйте <em> .
  2. Тег <i> имеет новое значение в HTML5 , представляя «a span of text in an alternate voice or mood». Поэтому вы должны использовать этот тег для таких вещей, как мысли/мысли или идиоматические фразы. Спецификация также предлагает названия кораблей (но больше не предлагает имена book/song/movie; вместо этого используйте <cite> ).
  3. Если выделенный курсивом текст является частью более широкого контекста, скажем, вступительного абзаца, вы должны прикрепить стиль CSS к более крупному элементу, т. е. p.intro { font-style: italic; }

Поделиться DisgruntledGoat     21 января 2010 в 12:44


22

<i> не является неправильным, потому что он не является семантическим. Это неправильно (обычно), потому что это презентационно. Разделение интересов означает, что информация о настоящем должна передаваться с CSS.

Именование в целом может быть сложным, и имена классов не являются исключением, но, тем не менее, это то, что вам нужно сделать. Если вы используете курсив, чтобы выделить блок из основного текста, то, возможно, имя класса «flow-distinctive» будет в порядке. Подумайте о повторном использовании: имена классов предназначены для категоризации — где еще вы хотели бы сделать то же самое? Это должно помочь вам определить подходящее имя.

<i> входит в HTML5, но ему придается определенная семантика. Если причина, по которой вы выделяете что-то курсивом, соответствует одной из семантик, указанных в спецификации, было бы целесообразно использовать <i> . Иначе-нет.

Поделиться Alohci     21 января 2010 в 10:39


10

Я не эксперт, но я бы сказал, что если вы действительно хотите быть семантическим, вы должны использовать словари (RDFa).

Это должно привести к чему-то подобному:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

em используется для представления (люди увидят его курсивом), а атрибуты property и href ссылаются на определение того, что такое курсив (для машин).

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

Подробнее о RDFa здесь: http://www.alistapart.com/статьи/introduction-to-rdfa/

Поделиться Guillaume Flandre     21 января 2010 в 10:31


7

TLDR

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

Более Длинное Объяснение

Не беспокойтесь о презентации при написании markup. Не думайте в терминах курсива. Думайте в терминах семантики. Если это требует подчеркивания стресса, то это em . Если он касателен к основному контенту, то это aside . Может быть, он будет жирным, может быть, курсивом, может быть, флуоресцентно-зеленым. Не имеет значения, когда вы пишете markup.

Когда вы доберетесь до CSS, у вас уже может быть семантический элемент, который имеет смысл выделять курсивом все его вхождения на вашем сайте. em -хороший пример. Но, возможно, вы хотите, чтобы все aside > ul > li на вашем сайте было выделено курсивом. Вы должны отделить размышления о markup от размышлений о презентации.

Как упоминалось DisgruntledGoat , i является семантическим в HTML5. Однако семантика кажется мне довольно узкой. Использование, вероятно, будет редким.

Семантика em изменилась в HTML5, чтобы подчеркнуть акцент. strong также можно использовать для демонстрации важности.

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

class="italic" — это плохо. Не используй его. Он не является семантическим и вообще не является гибким. Презентация по-прежнему имеет семантику, просто она отличается от markup.

class="footnote" эмулирует семантику markup и также неверен. Ваш CSS для сноски не должен быть полностью уникальным для вашей сноски. Ваш сайт будет выглядеть слишком грязно, если каждая часть будет оформлена по-разному. У вас должны быть некоторые визуальные шаблоны, разбросанные по вашим страницам, которые вы можете превратить в классы CSS. Если ваш стиль сносок и блок-цитат очень похож, то вам следует поместить сходство в один класс, а не повторяться снова и снова. Вы можете рассмотреть возможность принятия практики OOCSS (ссылки ниже).

Разделение проблем и семантика велики в HTML5. Люди часто не понимают, что markup-не единственное место, где важна семантика. Существует семантика содержания (HTML), но есть также семантика представления (CSS) и поведенческая семантика (JavaScript). Все они имеют свою собственную отдельную семантику, на которую важно обратить внимание для удобства обслуживания и сохранения DRY.

Ресурсы OOCSS

Поделиться Eva     06 сентября 2013 в 00:46


5

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

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

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

Поскольку это достаточно сложные стили (с соответствующими проблемами Интернета Explorer), повторно используемые в разных местах, мы создаем классы , такие как box-1 , box-2, чтобы мы могли повторно использовать стили.

Конкретный пример выделения текста курсивом слишком тривиален, чтобы беспокоиться об этом. Лучше оставить подобные мелочи для Семантических Психов, чтобы они могли поспорить.

Поделиться Paul D. Waite     21 января 2010 в 10:38


3

HTML курсивный текст отображает текст в формате курсива.

<i>HTML italic text example</i>

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

<p>This is <em>emphasized </em> text format <em>example</em></p>

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

Дополнительные сведения см. в этом руководстве: HTML Форматирование текста

Поделиться Prabhakar Undurthi     29 ноября 2015 в 04:23


2

Элемент i не является семантическим, поэтому для читателей экрана, Googlebot и т. Д. Он должен быть каким-то прозрачным (как и элементы span или div ). Но это не очень хороший выбор для разработчика, потому что он соединяет слой презентации со слоем структуры — и это плохая практика.

элемент em ( а также strong ) всегда должен использоваться в семантическом контексте, а не в презентационном. Его нужно использовать всякий раз, когда какое-то слово или предложение важно. Просто для примера в предыдущем предложении я должен использовать em , чтобы сделать больший акцент на части «всегда должно использоваться». Браузеры предоставляют некоторые свойства CSS по умолчанию для этих элементов, но вы можете и должны переопределить значения по умолчанию, если ваш дизайн требует этого, чтобы сохранить правильное семантическое значение этих элементов.

<span>Italic Text</span> — это самый неправильный путь. Во-первых, он неудобен в использовании. Во-вторых, он предлагает, чтобы текст был выделен курсивом. И слой структуры (HTML, XML и т. Д.) Никогда не должен этого делать. Презентация всегда должна быть отделена от структуры.

<span>Italic Text</span> , по-видимому, лучший способ для сноски. Он не предлагает никакой презентации и просто описывает markup. Вы не можете предсказать, что произойдет в этой функции. Если сноска будет расти в функции, вы можете быть вынуждены изменить имя ее класса (чтобы сохранить некоторую логику в коде).

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

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

Поделиться Crozin     21 января 2010 в 11:02


1

Я думаю, что ответ заключается в том, чтобы использовать <em> , когда вы намереваетесь сделать акцент.

Если при чтении текста про себя вы обнаружите, что используете немного другой голос, чтобы подчеркнуть какой-то момент, то он должен использовать <em> , потому что вы хотели бы, чтобы программа чтения с экрана делала то же самое.

Если это чисто стилевая вещь, например, ваш дизайнер решил, что все ваши заголовки <h3> будут лучше выглядеть в курсиве Garamond, то нет никакой семантической причины включать его в HTML, и вы должны просто изменить CSS для соответствующих элементов.

Я не вижу никаких причин использовать <i> , если только вам специально не нужно поддерживать какой-то устаревший браузер без CSS.

Поделиться GrahamS     21 января 2010 в 11:05


0

Хорошо, первое, что следует отметить, это то, что <i> устарел и не должен использоваться <i> не устарел, но я все равно не рекомендую его использовать—подробности см. В комментариях. Это происходит потому, что это полностью противоречит сохранению презентации на уровне презентации, на который вы указали. Точно так же <span> , похоже, тоже ломает форму.

Итак, теперь у нас есть два реальных способа делать вещи: <em> и <span> . Помните, что em означает ударение . Если вы хотите сделать акцент на слове, фразе или предложении, вставьте его в теги <em> , независимо от того, хотите ли вы выделить курсивом или нет. Если вы хотите изменить стиль каким-либо другим способом, используйте CSS: em { font-weight: bold; font-style: normal; } . Конечно, вы также можете применить класс к тегу <em> : если вы решите, что хотите, чтобы определенные подчеркнутые фразы отображались красным цветом, дайте им класс и добавьте его в CSS:

Fancy some <em>shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

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

Поделиться Samir Talwar     21 января 2010 в 10:37


0

Я бы сказал, используйте <em> , чтобы подчеркнуть встроенные элементы. Используйте класс для блочных элементов, таких как блоки текста. CSS или нет, текст все равно должен быть помечен. Будь то для семантики или для наглядного пособия, я предполагаю, что вы будете использовать его для чего-то значимого…

Если вы выделяете текст по причине ANY, вы можете использовать <em> или класс , выделяющий текст курсивом.

Это OK иногда нарушать правила !

Поделиться tahdhaze09     21 января 2010 в 14:17


-1

Используйте <em>, если вам нужны некоторые слова/символы курсивом в контенте без других стилей. Это также помогает сделать контент семантическим.

text-style лучше подходит для нескольких стилей и не требует семантической необходимости.

Поделиться aryan     21 января 2010 в 10:37


-3

DO

  1. Дайте атрибуту класса значение, указывающее на характер данных (т. е. class="footnote" — это хорошо)

  2. Создайте таблицу стилей CSS для страницы

  3. Определите стиль CSS, который присоединяется к классу, назначенному элементу

    .footnote { font-style:italic; }

не

  1. Не используйте элементы <i> или <em> — они не поддерживаются и слишком тесно связывают данные и представление.
  2. Не присваивайте классу значение, указывающее правила представления (т. е. Не используйте class="italic" ).

Поделиться Ninju Bohra     22 февраля 2012 в 17:42

Похожие вопросы:


Вариант выделен курсивом

Есть ли какой-нибудь кроссбраузерный способ выделить курсивом select options ? Со следующими CSS и HTML, FireFox показывает второй вариант курсивом, но не третий. Ни один из вариантов не выделен…


Как выделить текст курсивом назад?

Я хотел бы выделить курсивом текст назад или влево в противоположную сторону от этого текущего текста . Возможно ли это сделать в HTML/CSS или даже с Javascript/jQuery?


У <em> тэг произвести non-выделенный курсивом текст в курсив контексте

Я стилизовал тег h5 , чтобы использовать курсивный стиль шрифта font-style: italic; . Работает отлично. В заголовке я хотел бы иногда подчеркивать слова, используя тег em . Когда это происходит, я…


Как сделать текст значения в форме курсивом

У меня есть скрипт, который стирает текст значения по умолчанию в форме, когда пользователь нажимает на поле, но как я могу сделать так, чтобы текст значения отображался курсивом? Если я изменю ввод…


CSS: как сделать текст курсивом между тегами img и br

Вот с чем я боролся последние недели. Допустим, у меня есть следующий html (упрощенный пример кода) <img class=myimageclass /> This is some text <br /> Тогда моя проблема заключается в…


Поля ввода с форматом: с помощью Ctrl+i, чтобы установить текст курсивом удаляет текст

У меня есть следующий код для выделения текста жирным шрифтом и курсивом в RichEditBox: private async void Page_KeyDown(object sender, KeyRoutedEventArgs e) { var state =…


Как сделать описание товара в Magento идти не курсивом

Недавно я изменил шаблоны Magento Go, но есть одна проблема с шаблоном, который я сейчас использую. Все описание продукта выделено курсивом, и я не могу понять, как удалить этот ‘feature’. Я…


Закрыто: pug-сделать текст курсивом внутри тега h2

Я использую движок шаблонов pugjs на своем сервере expressjs , но между документами pugjs и моими собственными экспериментами я не могу понять, как сделать текст выделенным курсивом в теге h2. В…


Выделение курсивом одного слова в заполнителе HTML

Я хотел бы выделить курсивом одно слово в атрибуте-заполнителе HTML. Я пробовал <i></i> и <span> с css стилями, но ни один из них не работает, так как он принимает только открытый…


Создание текста в одной колонке курсивом с CSS

Я хотел бы сделать текст в одной колонке курсивом, используя CSS. В настоящее время структура моей таблицы следующая, но я не могу заставить текст в правом столбце быть выделен курсивом. CSS (в…

Оформляем текст с помощью CSS

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

p { font-family: Arial, Tahoma, sans-serif; }

p {

  font-family: Arial, Tahoma, sans-serif;

}

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

Если название шрифта состоит более чем из одного слова — то в CSS возьмите шрифт в кавычки, например:

font-family: «Times New Roman»;

font-family: «Times New Roman»;

Размер шрифта задается кодом:

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

Цвет шрифта можно задать с помощью команды:

Насыщенность шрифта определяется двумя состояниями: нормальный и жирный. Задать жирное начертание шрифта можно с помощью кода:

Если необходимо шрифт сделать нормальным:

Некоторые шрифты могут быть выполнены в различных насыщенных вариантах, поэтому CSS поддерживает градацию насыщенности шрифта, которая выражается в числах от 100 до 900. Запись вида:

соответствует обычному начертанию шрифта.

Значение 800 — это жирный шрифт. Остальные цифры соответствуют разной насыщенности шрифта. Максимальное значение насыщенности шрифта 900. Обратите внимание данные числа указываются без величин измерения!

Также, есть очень простой способ сделать текст прописными буквами: свойство text-transform. Пример:

text-transform: uppercase;

  text-transform: uppercase;

Для того, чтобы сделать текст курсивом используется свойство font-style:

Напомним, что делать текст жирным начертанием и курсивом можно с помощью тегов <b> и <i>. Какой из способов выбрать в каждом конкретном случае решаете вы. Если необходимо единичное слово или букву сделать только жирной или курсивом, то логичнее использовать теги, если кроме этого присутствует другое оформление, то удобнее применить CSS стили. Напоминаем, что теги <strong> и <em>, которые визуально делают текст жирным и курсивом, в HTML 5 выполняют семантическую роль, и применять их как замену тегам <b> и <i>ь не корректно.

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

.one { color: green; text-transform: uppercase; font-weight: bold; }

.one {

  color: green;

  text-transform: uppercase;

  font-weight: bold;

}

See the Pen span by Alex (@Asmodey) on CodePen.

Форматирование текста (font-weight, font-style, font-size, text-indent) в HTML

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

Жирность текста (font-weight)

С первого взгляда свойство font-weight дублирует тег <b>. То есть делает текст жирным. Но не спешите с выводами, потому что это свойство может различать градации жирного. Для этого у него есть несколько значений:
  • normal — нормальная жирность шрифта (то есть нет жирного)
  • bold — текст будет выделен жирным
  • bolder — текст будет жирнее, чем жирность текста у родительского элемента
  • lighter — текст будет менее жирным, чем текст у родительского элемента
Приведём пример:
Тише, <span>мыши</span>, кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Помимо эти названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра — тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.

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

Курсив (font-style)

Курсив можно получить с помощью тега <i>. Но ещё и через свойство font-style со значением italic. Приведём пример:
Тише, <span>мыши</span>, кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Чтобы сделать из курсива нормальный шрифт, используйте «font-style: normal;»

Размер шрифта (font-size)

Через CSS свойство font-size можно задать размер шрифта. Это свойство может принимать несколько единиц измерений. Перечислим их в порядке убывания популярности использования:
  • px — пикселы,
  • % — проценты (от размера шрифта родительского элемента)
  • em — высота шрифта элемента (единица — это сто процентов от размера шрифта родительского элемента),
  • pt — пункты (по сути пиксели, но в пропорции 12pt = 16px)
  • текстовые названия размеров: xx-small, x-small, smal, medium, large, x-large, xx-large
  • ex — высота символа х (единица — это сто процентов),
Приведём пример использования. Постараемся сделать примерно одинаковый размер шрифта, используя все возможные единицы измерений:
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.

Красная строка (text-indent)

Наверное, вы уже заметили, что HTML не воспринимает пробелы. То есть если в HTML коде поставить сотню пробелов между словами, а потом открыть этот HTML файл в браузере, то пробелы заменятся на один. Из-за этого и нет возможности сделать красную строку в абзаце. Но на помощь приходит CSS свойство text-indent, которое может сделать этот отступ. Значение этого свойства задаются в пикселях. Приведём пример:
<div>
   Тише, мыши, кот на крыше,<br>
   а котята ещё выше.
</div>
В браузере будет показано так:

Тише, мыши, кот на крыше,
а котята ещё выше.

CSS: шрифты

CSS: шрифты

Смотрите также указатель всех приёмов работы.

На этой странице:

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

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:

‘sans-serif’: обычные шрифты без засечек
Arial, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Helvetica, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Verdana, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Trebuchet MS, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Gill Sans, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Noto Sans, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Arial Narrow, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
Times, Times New Roman, serifСъешь же ещё этих мягких французских булок да выпей чаю
Georgia, serifСъешь же ещё этих мягких французских булок да выпей чаю
Palatino, URW Palladio L, serifСъешь же ещё этих мягких французских булок да выпей чаю
Bookman, URW Bookman L, serifСъешь же ещё этих мягких французских булок да выпей чаю
New Century Schoolbook, TeX Gyre Schola, serifСъешь же ещё этих мягких французских булок да выпей чаю
serifСъешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
Andale Mono, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
Courier New, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
Courier, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
FreeMono, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
DejaVu Sans Mono, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
monospaceСъешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
Comic Sans MS, Comic Sans, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
Bradley Hand, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
Brush Script MT, Brush Script Std, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
Snell Roundhand, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
URW Chancery L, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
cursiveСъешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
Impact, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
Luminari, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
Marker Felt, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
Trattatello, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
fantasyСъешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правилоserifsans-serif
Стили
font-style: normalСъешь же…Съешь же…
font-style: italicСъешь же…Съешь же…
font-style: obliqueСъешь же…Съешь же…
Насыщенность шрифта
font-weight: 100Съешь же…Съешь же…
font-weight: 200Съешь же…Съешь же…
font-weight: 300Съешь же…Съешь же…
font-weight: normalСъешь же…Съешь же…
font-weight: 500Съешь же…Съешь же…
font-weight: 600Съешь же…Съешь же…
font-weight: boldСъешь же…Съешь же…
font-weight: 800Съешь же…Съешь же…
font-weight: 900Съешь же…Съешь же…
Варианты
font-variant: normalСъешь же…Съешь же…
font-variant: small-capsСъешь же…Съешь же…
Растяжение
font-stretch: ultra-condensedСъешь же…Съешь же…
font-stretch: extra-condensedСъешь же…Съешь же…
font-stretch: condensedСъешь же…Съешь же…
font-stretch: semi-condensedСъешь же…Съешь же…
font-stretch: normalСъешь же…Съешь же…
font-stretch: semi-expandedСъешь же…Съешь же…
font-stretch: expandedСъешь же…Съешь же…
font-stretch: extra-expandedСъешь же…Съешь же…
font-stretch: ultra-expanded Съешь же…Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Как правильно сделать текст курсивом?

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

<i>Italic Text</i>

<em>Italic Text</em>

<span>Italic Text</span>

<span>Italic Text</span>

<i>

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

<em>

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

<span>

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

<span>

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

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

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

Резюме

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

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

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

Учебник CSS для начинающих. Свойства шрифта.

Глава 3

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

Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.

Шрифт может иметь следующие стили:

  • normal — обычный (по умолчанию)
  • italic — курсив
  • oblique — наклонный

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Стиль шрифта</title>
</head>
<body>
<p>это курсив</p>
<p>а это наклонный текст</p>
<p>И чем спрашивается, они отличаются?</p>
</body>
</html>

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

Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.

Значения:

  • normal — нормальный (по умолчанию)
  • small-caps — все буквы заглавные и уменьшенные

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Все буквы заглавные</title>
</head>
<body>
<p>Купи слона!!</p>
</body>
</html>

Свойство CSS font-size — определяет размер шрифта.

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

значения абсолютного размера шрифта:

  • xx-small — очень очень маленький
  • x-small — очень маленький
  • small — маленький
  • medium — средний
  • large — большой
  • x-large — очень большой
  • xx-large — очень очень большой

значения относительного размера шрифта:

  • larger — больше чем размер шрифта родительского элемента
  • smaller — меньше чем размер шрифта родительского элемента

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Размер шрифта</title>
</head>
<body>
<div>
<p>Размер шрифта родительского элемента (блока DIV) равен 18 пикселям</p>
<p>Этот шрифт будет крупнее относительно элемента родителя</p>
<p>А этот шрифт будет мельче относительно элемента родителя</p>
</div>
<p>В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.</p>
<div>
<p>xx-small — очень очень маленький</p>
<p>x-small — очень маленький </p>
<p>small — маленький </p>
<p>medium — средний</p>
<p>large — большой</p>
<p>x-large — очень большой</p>
<p>xx-large — очень очень большой</p>
</div>
</body>
</html>

Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:

  • normal — обычный шрифт
  • bold — полужирный шрифт
  • bolder — жирный шрифт
  • lighter — тонкий шрифт

А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Жирность шрифта</title>
</head>
<body>
<div>
<p>жирный шрифт</p>
<p>тонкий шрифт</p>
<p>жирность шрифта равна 600</p>
</div>
</body>
</html>

Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} — будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

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

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

  • serif — шрифты с засечками
  • sans-serif — рубленые шрифты
  • cursive — курсивные шрифты
  • fantasy — декоративные шрифты
  • monospace — моношириные шрифты

Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif — рубленых шрифтов.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Семейство шрифта</title>
<style type=»text/css»>
h4 {font-family: Times New Roman, Verdana, sans-serif;}
p {font-family: Monotype Corsiva, Verdana;}
span {font-family: Comic Sans MS;}
</style>
</head>
<body>
<h4>Купи слона</h4>
<p>У нас Вы можете по <span>выгодным ценам</span> приобрести лучших слонов!!</p>
</body>
</html>

Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..

Так вот это неспроста.. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

Речь будет недолгой.. )) Итак font — (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

Для более детального ознакомления с возможными параметрами смотрите каждый атрибут отдельно.

Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial

Все это можно осуществить, написав следующие:

span{
font-style: italic;
font-weight: bolder;
font-size: 20px;
font-family: Arial
}

А можно обойтись всего одной строчкой используя базовый атрибут font.

Вот так:

span{font: italic bold 20px Arial}

Мы просто перечислили нужные нам параметры «марки» font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Параметры шрифта</title>
<style type=»text/css»>
span{font: italic bold 20px Arial}
</style>
</head>
<body>
<span>Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial</span>
</body>
</html>

  • Используйте базовый атрибут font если необходимо применить к шрифту элемента более одного свойства.

  • Помните что текст, прежде всего, должен быть удобным для чтения и только потом красивым и стильным, а по сему советую избегать следующих вещей:

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

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



Текст и шрифт CSS — Русские Блоги

Предлагаемое время обучения: 30 минут
Метод обучения: углубленный

цель обучения

  • Знать настройки стиля текста и шрифта

Подробное введение

font-family

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


font-family: Georgia, "Times New Roman",
                           «Microsoft YaHei», «Microsoft YaHei»,
                           STXihei, "Китайский тонкий черный",
             serif;

font-size

Укажите размер шрифта. Такие как

p{
  font-size: 14px;
}
p small{
  font-size: 80%;
}

color

Укажите цвет текста. См. Дополнительные значенияЗдесь

line-height

Укажите высоту строки. Такие как

p{
  line-height: 1.1em;
}
div{
  line-height: 24px;
}

font-weight

Укажите толщину слова. Необязательное значение

  • inherit
  • normal
  • смелее (смелее)
  • жирный (толстый)
  • зажигалка (хорошо)
  • 100,200,300,400,500,600,700,800,900 (чем больше значение, тем толще, единицы измерения нет)

font-style

Атрибут определяет стиль шрифта. Необязательное значение

  • нормальный (по умолчанию)
  • italic использует курсивный атрибут шрифта
  • oblique делает шрифт наклонным
  • Наследовать наследует стиль шрифта от родительского элемента

Все основные браузеры поддерживают свойство font-style.
Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение атрибута «наследование»

Разница между курсивом и наклонным шрифтом

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

font

Шрифт состоит из стиля шрифта, варианта шрифта, веса шрифта, размера шрифта, высоты строки и семейства шрифтов.
, например

font: italic bold 1.5em/2 arial, Helvetica, sans-serif;

text-align

Задает горизонтальное выравнивание текста внутри элемента. Необязательное значение

  • по левому краю выровнять по левому краю
  • верно
  • по центру
  • оправдать оправдать

text-indent

Укажите отступ. Например, отступ абзаца двумя символами

p{
  text-indent: 2em;
}

Скрытый текст можно использовать

.hide-text{
  text-indent: -99999px;
}

text-decoration

Измените текст. Необязательное значение

  • none
  • подчеркивать
  • над чертой
  • Линия, проходящая через

text-overflow

Укажите метод обработки, когда текст превышает размер элемента.
Переполнение однострочного текста с многоточием

white-space: nowrap; / * Это должно быть установлено * /
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;

vertical-align

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

white-space

Укажите, что делать, если в содержимом элемента есть пробелы.
Наиболее частое использование — запретить перенос части содержимого, когда в содержимом элемента нет пробелов.

white-space: nowrap;

Некоторые другие правила стиля шрифта

  • font-stretch Растянуть и деформировать слово
  • @ font-face определяет шрифт
  • text-transform контролирует регистр текста
  • эффект тени текста
  • font-variant указывает, нужно ли преобразовывать строчные буквы в прописные с меньшим размером шрифта

Действующие правила

  1. Шрифт, который занимает первое место, является предпочтительным.
  2. Если шрифт не может быть найден или шрифт не включает текст для отображения, используется следующий шрифт.
  3. Если ни один из перечисленных шрифтов не соответствует требованиям, операционная система решает, какой шрифт использовать.

Пункты внимания

  1. Большинство китайских шрифтов содержат английские буквы (которые в основном уродливы), тогда как английские шрифты не содержат китайских символов. Следовательно, в font-family сначала должны быть указаны английские шрифты, а затем китайские шрифты. В противном случае английские буквы, содержащиеся в китайских шрифтах, заменят английские шрифты, что часто бывает некрасиво.
  2. Поместите шрифты, поддерживаемые Mac, перед Windows. Потому что некоторые пользователи Mac установили общие шрифты под Windows (благодаря Office для Mac), но очень немногие пользователи Windows установили общие шрифты для Mac.
  3. Для обеспечения совместимости китайское имя и английское имя китайских шрифтов должны быть записаны в font-family. Например, английское название Microsoft YaHei — Microsoft YaHei.
  4. Если в названии шрифта есть пробел, заключите название шрифта в двойные кавычки. Такие как «Microsoft Yahei».

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


Пример

Задайте некоторые свойства шрифта с помощью сокращенного объявления:

p.a {
шрифт: 15px Arial, без засечек;
}

п.б {
шрифт: курсив, полужирный, полужирный, 12px / 30px Georgia, serif;
}

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

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство font является сокращенным свойством для:

Значения font-size и font-family являются обязательными.Если одно из других значений отсутствует, используются их значения по умолчанию.

Примечание: Свойство line-height устанавливает расстояние между строками.

Значение по умолчанию: Значение свойств шрифта по умолчанию
Унаследовано: да
Анимируемое: да, посмотреть отдельные свойства . Прочитать про animatable Попробуй
Версия: CSS1
Синтаксис JavaScript: объект .style.font = «курсив, полужирный шрифт, полужирный шрифт, шрифт 12px, шрифт без засечек» Попробуй

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

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

Объект
шрифт 1.0 4,0 1.0 1.0 3,5

Примечание: См. Поддержку каждого значения в отдельном браузере ниже.

Синтаксис CSS

font: font-style font-variant font-weight font-size / line-height семейство шрифтов | caption | icon | menu | message-box | small-caption | status-bar | initial | наследовать;

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

Имущество / Стоимость Описание
стиль шрифта Задает стиль шрифта. Значение по умолчанию — «нормальный»
вариант шрифта Задает вариант шрифта.Значение по умолчанию — «нормальный»
font-weight Задает толщину шрифта. Значение по умолчанию — «нормальный»
размер шрифта / высота строки Задает размер шрифта и высоту строки. Значение по умолчанию — «нормальный»
семейство шрифтов Задает семейство шрифтов. Значение по умолчанию зависит от браузера
подпись Использует шрифт, который используется элементами управления с субтитрами (например, кнопки, раскрывающиеся списки и т. д.)
значок Использует шрифт, который используется в ярлыках значков.
меню Использует шрифты, которые используются в раскрывающихся меню.
окно сообщения Использует шрифты, которые используются диалоговыми окнами
с мелкими подписями Уменьшенная версия шрифта подписи
строка состояния Использует шрифты, которые используются в строке состояния
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальные
унаследовать Наследует это свойство от своего родительского элемента. Прочитать про наследство

Другие примеры

Пример

Демонстрация некоторых других значений свойств шрифта.

Шрифт браузера, используемый в элементах управления с субтитрами.


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


Шрифт браузера, используемый в раскрывающихся меню.


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


Уменьшенная версия шрифта заголовка.


Шрифт браузера, используемый в строке состояния. < / п>

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

Связанные страницы

Учебник

CSS: Шрифт CSS

Ссылка на HTML DOM: свойство шрифта



Как выделить текст курсивом | CSS-уловки

HTML и CSS предлагают нам возможность выделять текст курсивом. Я говорю о таких текстах, как , это .Расскажем обо всем, что вам нужно знать.

Что такое курсивный текст и зачем его выделять курсивом?

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

Используйте тег

Буква «em» в строке буквально означает (выделение ).Браузеры по умолчанию выделяют курсивом текст, заключенный в теги HTML .

  

  Это была  чудесная  вечеринка, Бебе.

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

Используйте тег

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

  
  Миранда подумала:  Какая интересная метафора глобальной экономики. 


  Крис подумал:  Это горчица?

В чем разница между

и ?

Еще раз:

  

  Книга
  
   Мистер Круглосуточный книжный магазин Penumbra 
  это хорошо.





  Книга
  
   Мистер Круглосуточный книжный магазин Penumbra 
  это хорошо.

К счастью, браузеры выделяют контент, заключенный в теги , точно так же, как это делает , поэтому никаких дополнительных действий там не требуется, если вы цитируете работу (например, Moby Dick ) или публикацию (например,г. The New York Times ).

Используйте свой собственный класс HTML и CSS

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

  

  На этой неделе  распродажа  обуви!

  
  .emphasis {
  фон: светло-желтый;
  стиль шрифта: курсив;
}

CSS-свойство font-style — это то, что вам нужно для выделения текста курсивом, который вы можете применить к любому селектору, который вам нравится.

Остерегайтесь «Faux Italic»

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

Ничто не предупредит вас об этом — вам просто нужно на это глаз. Вот пример шрифта Merriweather, выделенного имитационным курсивом:

.

Курсив Unicode

В Unicode доступно огромное количество символов, включая буквы с курсивом.

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

Доступность это ужасная. Он дойдет до каждого персонажа индивидуально, что затрудняет понимание слова (предположительно, для меня). Будьте очень осторожны при использовании этого, если вы даже используете его полностью.

Курсив переменным шрифтом

Это немного продвинутая концепция, но есть вещи, называемые переменными шрифтами. Они предлагают настройку прямо в браузере.Таким образом, вместо второго файла шрифта для полужирной версии у них есть информация, позволяющая выделить себя этим одним файлом. Но «полужирный» — это всего лишь пример того, что может предложить переменный шрифт . Не все из них обязательно делают.

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

v-fonts.com

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

font-style — CSS: каскадные таблицы стилей

Свойство CSS font-style устанавливает, должен ли шрифт быть стилизован с нормальным, курсивом или наклонным шрифтом из его семейства font-family .

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

  стиль шрифта: обычный;
стиль шрифта: курсив;
стиль шрифта: наклонный;
стиль шрифта: наклонный 10 градусов;


стиль шрифта: наследовать;
стиль шрифта: начальный;
стиль шрифта: вернуться;
стиль шрифта: не задано;

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

Значения

нормальный
Выбирает шрифт, который классифицируется как обычный в семействе шрифтов .
курсив
Выбирает шрифт, классифицируемый как курсив . Если курсивная версия лица недоступна, вместо нее используется классификация косая . Если ни один из них не доступен, стиль имитируется искусственно.
косая
Выбирает шрифт, который классифицируется как наклонный .Если наклонная версия лица недоступна, вместо нее используется курсив , курсив . Если ни один из них не доступен, стиль имитируется искусственно.
наклонный <угол>
Выбирает шрифт, классифицируемый как наклонный , и дополнительно указывает угол наклона текста. Если в выбранном семействе шрифтов доступны одна или несколько наклонных граней, выбирается та, которая наиболее точно соответствует указанному углу. Если наклонные грани недоступны, браузер синтезирует наклонную версию шрифта, наклоняя нормальное начертание на указанную величину.Допустимые значения: от до 90 градусов, от до , до 90 градусов, включительно. Если угол не указан, используется угол 14 градусов. Положительные значения наклонены к концу строки, а отрицательные значения наклонены к началу.

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

Вариативные шрифты

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

Для переменных шрифтов TrueType или OpenType вариант "slnt" используется для реализации различных углов наклона для наклонного, а вариант "ital" со значением 1 используется для выделения значений курсивом. См. настройки-вариации шрифта .

Для работы приведенного ниже примера вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-style: oblique может принимать .

HTML 
  <заголовок>
    
    



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

@ font-face {
  src: url ('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf ');
  семейство шрифтов: 'AmstelvarAlpha';
  стиль шрифта: нормальный;
}

этикетка {
  шрифт: 1rem моноширинный;
}

.container {
  максимальная высота: 150 пикселей;
  переполнение: прокрутка;
}

.образец {
  шрифт: 2rem 'AmstelvarAlpha', без засечек;
}
JavaScript 
  let slantLabel = document.querySelector ('label [for = "slant"]');
let slantInput = document.querySelector ('# наклон');
let sampleText = document.querySelector ('. sample');

function update () {
  let slant = `oblique $ {slantInput.value} deg`;
  slantLabel.textContent = `font-style: $ {slant};`;
  sampleText.style.fontStyle = наклон;
}

slantInput.addEventListener ('ввод', обновление);

Обновить();

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

Стили шрифтов 

  .normal {
  стиль шрифта: нормальный;
}

.italic {
  стиль шрифта: курсив;
}

.oblique {
  стиль шрифта: наклонный;
}

Таблицы BCD загружаются только в браузере

В чем разница между тегом HTML и css «font-style: italic»?

Pre-HTML5, не было никакой разницы ни в визуальном плане, ни в семантике; i , например b , s и u , были презентационным элементом.Это в отличие от em , strong , del и ins соответственно.

В HTML5 элемент i имеет особое значение, которое визуально представляется в виде текста, выделенного курсивом. Его не следует использовать для представления только любого текста , который выделен курсивом. В частности, он отличается от элемента em , который представляет ударение (и, в отличие от i , не обязательно выделяется курсивом). span остается общим элементом фразировки, не несущим вообще никакого смысла.

Обычно я цитирую здесь спецификацию, но я думаю, что сводку MDN легче понять:

HTML элемент представляет диапазон текста, который по какой-то причине отличается от обычного текста. Некоторые примеры включают технические термины, фразы на иностранном языке или мысли вымышленных персонажей. Обычно он отображается курсивом.

Тем не менее, спецификация предлагает лучшие примеры:

В примерах ниже показано использование элемента i :

  
  Felis silvestris catus  симпатичный.


 Термин  содержание прозы  определен выше. 


 В воздухе витает некий  je ne sais quoi .

В следующем примере последовательность сновидений размечена с использованием элементов i .

  
 Раймонд пытался уснуть. 


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


  Наконец однажды ночью он набрался смелости поговорить с
ее -  


 Раймонд проснулся, вздрогнув, когда зазвонила пожарная сигнализация.

Доступность в Пенсильвании | Полужирный и курсив в HTML

Содержание страницы

Жирный вместо курсива

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

Форматирование печати

Книга «Маленький принц » считается поэтической и философской во французской литературной культуре (см. французская Википедия: «Маленький принц »).

Веб-форматирование 1 (полужирный)

Книга «Маленький принц» считается поэтической и философской во французской литературной культуре (см. Французскую Википедию: «Маленький принц»).

Веб-форматирование 2 (полужирный и курсив)

Книга «Маленький принц» считается во французской литературной культуре « поэтическая и философская» (см. Французскую Википедию: «Маленький принц»).

B по сравнению с STRONG

Почему EM и СИЛЬНЫЙ

Многие эксперты по специальным возможностям рекомендуют использовать STRONG вместо B для полужирного текста и EM вместо I для курсива.Причины этой рекомендации:

  1. STRONG и EM — это семантические теги, означающие, что они указывают на то, что автор желает сделать акцент, который выделяется полужирным шрифтом / курсивом в визуальном браузере или в различных стилях речи в программе чтения с экрана.
  2. Теоретически программы чтения с экрана могут произносить STRONG и EM другим голосом или стилем. Однако на практике это случается редко (то же самое верно для тегов B и I ).

Почему не критично

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

  1. Обычные программы чтения с экрана в настоящее время обрабатывают теги B / I так же, как теги STRONG / EM. То есть они игнорируются, , если пользователь не указывает, что они должны быть указаны. Некоторые пользователи сообщают, что объявление об изменениях может отвлекать.
  2. Многие авторы в любом случае выделяют полужирный шрифт или курсив исключительно по визуальным причинам (в этом случае может быть предпочтительнее B / I) или не уверены, почему они добавляют форматирование, тем самым удаляя полезность STRONG / EM.

    ПРИМЕЧАНИЕ: Никакие спецификации специальных возможностей не требуют исключения использования тегов B и I, а только их правильного использования.

Некоторые возможные семантические варианты использования жирного шрифта и курсива

Эти элементы являются примерами элементов, которые могут быть помечены как STRONG и EM .

  1. Предупреждающие таблички
  2. Ключевые понятия или ключевые словарные элементы в курсе.
    Но с использованием полужирного начертания для выделения каждого экземпляра выразительной интонации может быть просто немного отвлекающим в длинном тексте, но может быть полезным в визуальных браузерах.

Некоторые возможные визуальные варианты использования полужирного шрифта и курсива

  1. Чтобы сделать цветной или мелкий текст более четким и разборчиво
  2. академических съезда, в том числе:
  • Названия книг и фильмов (например, Унесенные ветром )
  • Иностранные слова в английском тексте (например, «Испанское слово« кошка »- el gato .»)
  • Переменные в текстах по математике, естествознанию и информатике (например, x = 2)
  • Чтобы сделать пункты меню, заголовки или инструменты навигации более четкими
  • Помощь пользователям в визуальном браузере в поиске ключевых понятий , которые могут быть разграничены другим способом (e.г. специальные знаки препинания) в тексте
  • Для целей проектирования

    • Использование CSS

    Если полужирный шрифт или курсив в основном визуальный и привязан к конкретному использованию в презентации, часто лучше включить спецификацию CSS для полужирного или курсивного начертания. Например, если вы хотите, чтобы тег CAPTION в ТАБЛИЦЕ всегда был полужирным или жирным и курсивом, вы можете использовать объявление CSS, например:

    Примеры использования CSS для полужирного и курсива

    caption {font-weight: bold}
    caption {font-style: italic; font-weight: bold;}

    Тем не менее, могут быть случаи, когда использование тега B или I, чтобы указать, что визуальное форматирование является наиболее эффективным решением.С точки зрения стандартов, решение таблицы стилей, такое как class = "bold"> Полужирный текст , так же семантически бессмысленно, как Полужирный текст и потребляет намного больше символов ASCII в файле HTML.

    Другие альтернативные теги

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

    Тег CITE (по умолчанию курсив)

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

    Тег VAR (по умолчанию курсив)

    Тег VAR семантически предназначен для представления переменных в компьютерном коде или математических уравнениях.

    Тег DEL (по умолчанию зачеркнутый)

    Тег DEL семантически предназначен для обозначения текста, который следует удалить, и должен использоваться вместо тега STRIKE.

    Тег INS используется для обозначения недавно вставленного текста или текста, заменяющего удаленный текст. По умолчанию текст подчеркнут, но вы можете использовать CSS, чтобы изменить его на другой формат (возможно, с новым цветом или с цветным фоном).

    Теги CODE и KBD (моноширинный шрифт по умолчанию)

    Тег CODE семантически предназначен для описания кода, такого как теги HTML (например,
    ) или спецификации CSS (например, {font-weight: bold} ).

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

    HTML 5

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

    • FIGCAPTION — Создает видимый текст, описывающий изображение
    • MARK — Создает выделенный или выделенный текст

    Начало страницы

    Учебное пособие по

    HTML курсивом — Как сделать текст курсивом с тегом

    В этой статье мы узнаем, как использовать тег и чем он отличается от тега .

    В предыдущих версиях HTML тег использовался для отображения текста курсивом. Но в HTML 5 определение изменилось. Мы собираемся изучить это новое определение и узнать о других способах стилизации текста курсивом с помощью CSS.

    Что такое тег

    ?

    Тег , или элемент Idiomatic Text, представляет собой отрезок текста, который представляет изменение настроения или качества текста. Этот текст выделен курсивом.

    Давайте рассмотрим несколько причин, по которым вы можете захотеть использовать тег .

    Использование тега

    для отметки фраз на другом языке

    Вы можете использовать тег для отметки фрагмента текста на другом языке. В этом примере латинская фраза выделена курсивом.

      
     Стейси только что сделала татуировку с фразой  Audentes fortuna iuvat , что означает «Фортуна любит смелых».

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

      
     Первая фраза, которую Мэтт выучил на итальянском, - это  Vorrei una birra , что переводится как «я бы хотел пива».

    Использование тега

    для отображения чьих-либо мыслей

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

      
     После того, как Бен встретил родителей своей девушки, он подумал про себя:  Я очень надеюсь, что я им понравился .

    Использование тега

    для названия корабля

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

      
      USS Arizona  - линкор ВМС США, построенный в 1910-х годах.

    Использование тега

    для таксономических описаний

    Согласно Конвенции о биологическом разнообразии,

    Таксономия — это наука о присвоении имен, описании и классификации организмов, включающая все растения, животных и микроорганизмы мира.

    Это будет пример использования тега для термина Felis catus .

      
     Другой термин для обозначения домашней кошки -  Felis catus .

    Различия между тегами и в HTML

    Вы можете подумать, что теги и имеют одинаковое значение, потому что они выглядят одинаково в браузере . Но эти два тега имеют разные значения друг от друга.

    Тег или элемент выделения следует использовать, когда вы хотите выделить слово или отрезок текста.

    Вот пример использования тега .

      
     Перестань быть младенцем и уже  сделай  это уже!

    Люди и программы чтения с экрана будут придавать словесное ударение слову «делать». Этим он отличается от тега , в котором тексту не уделялось дополнительного внимания.

    Следует ли использовать тег

    для стилизации?

    Не следует использовать тег для стилизации.Если вы хотите выделить текст курсивом, вам следует использовать свойство стиля шрифта CSS .

      
     Я использую CSS, чтобы выделить этот текст курсивом. 
    
      
      .demo-para {
  стиль шрифта: курсив;
}

    Следует использовать тег

    или для значков?

    На протяжении многих лет велись споры о том, «правильно» ли использовать теги или для добавления значков на ваш веб-сайт.

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

    Вот ответ от Font Awesome относительно использования для своих значков:

    Нам нравится тег для краткости и потому, что большинство людей используют для выделенного / выделенного курсивом смыслового текста в наши дни.Если это не ваша чашка чая, использование будет более семантически правильным.

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

    Заключение

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

    Тег не следует использовать для стилизации.Правильный способ выделить текст курсивом - использовать свойство стиля шрифта CSS .

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

    Как выделить текст в CSS курсивом?

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

    • нормальный: Это нормальный стиль шрифта.Это то же самое, что 400, числовое значение по умолчанию для жирности.
    • жирный: Это - жирный шрифт. Это то же самое, что и 700.
    • курсив: Это курсивный шрифт .

    Подход: Свойство стиля шрифта в CSS имеет три значения: нормальный, курсив, и жирный. Значение CSS курсив используется для выделения текста курсивом.

    Синтаксис: 

     стиль шрифта: курсив;

    Пример:

    HTML

    99

    < html lang = «en» >

    < голова >

    < мета кодировка = "UTF-8" />

    < мета http-эквивалент = «X-UA-Compatible» контент = «IE = край» />

    < мета имя = "область просмотра" контент =

    "ширина = ширина устройства, начальный масштаб = 1.0 " />

    < стиль >

    .gfg {

    стиль шрифта:

    ;

    font-size: 24px;

    margin: 10px;

    padding: 2px;

    цвет: черный;

    }

    стиль >

    головка >

    < корпус >

    < h3 >

    GeeksForGeeks | A Comp uter Science

    Портал для компьютерных фанатов

    h3 >

    < p class f = "g >

    Эта платформа была разработана для

    каждого компьютерщика, желающего расширить свои знания

    , поделиться своими знаниями и

    готов взять свои Работа мечты.У нас

    есть миллионы статей, живущих как

    , а также онлайн-курсы, тысячи обучающих программ

    и многое другое только для

    компьютерщик внутри вас.

    p >

    < p class = «гики» >

    Спасибо за то, что выбрали и поддержали нас!

    p >

    корпус >

    html >

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

    No related posts.