Курсивный шрифт css или как правильно выделять свой текст
Здравствуйте, мои юные падаваны веб-программирования. Текстовый контент и его внешний вид – это важная составляющая любого онлайн-сервиса. Я бы даже сказал визитная карточка, которая сразу же определяет уровень и качество созданного сайта. Именно поэтому сегодня мы с вами будем разбирать, как задавать курсивный шрифт css средствами.
Я дам подробную информацию об инструментах каскадных стилевых таблиц и приведу один контрольный пример. Мой вам совет: старайтесь разобрать каждую строчку программного кода, а еще лучше – самостоятельно выполнить поставленное задание. Ну что ж, приступим!
Задаем курсивное начертание тексту
В прошлых статьях я косвенно затрагивал тему видов начертания и как форматировать текст инструментами языка разметки. Сейчас же я хочу помочь вам расширить ваши знания при помощи аналогичных средств веб-языка css.
Главным свойством, которое отвечает за стилизацию текста, является font.
Это универсальный параметр, который позволяет устанавливать одновременно множество характеристик текстовому контенту. Так, за семейство шрифтов отвечает font- family. В нем можно указывать как общий вид группы шрифтов, так и отдельный стиль (например, Calibri).
Font- stretch позволяет установить плотность расположения символов.
Font- variant описывает представление текстовой информации (прописные или строчные буквы).
За насыщенность и толщину всех знаков отвечает font- weight.
А вот font- style описывает стиль начертания. Разберем его подробнее.
Благодаря font- style можно указать наклонное, курсивное и обычное представление текста.
Это определяют соответственно такие ключевые слова, как oblique, italic и normal. Также можно унаследовать параметры объекта-родителя при помощи ключевого слова inherit.
Как же в данном случае ведет себя браузер? Если в css-коде задан элемент font-style, то любой существующий браузер отправляет запрос специальной системе, которая в своих резервах ищет подходящий вид шрифта. В случае отрицательного ответа на запрос, браузер запускает некий алгоритм, который имитирует заданный разработчиком стиль начертания.
Однако это не всегда эффективно, так как алгоритм очень часто выдает некачественную, кривоватую имитацию. Особенно это становится заметно при печати документов.
Контрольный выстрел по знаниям
Сама по себе текущая тема публикации не сложная. Думаю, вы в этом уже давно убедились. Так что настал час перейти к практической части. Я сверстал небольшой пример, в котором постарался по максимуму использовать преимущества свойств типа font.
При запуске программного кода в браузере вам должна отобразится шаблонная страница выдуманной брокерской компании. Обратите особое внимание как видоизменилось начертание текстового контента и сами шрифты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-style</title>
<style>
body {
background: #D3D3D3;
margin:0;
}
h2 {
padding-left:2%;
font-family: Verdana, Helvetica, Calibri, sans-serif;
border-bottom: 3px solid #FFFAFA;
}
div {
border: 3px double;
width: 74%;
margin-left:13%;
background: #EEE9E9;
padding-left:3%;
font-style: oblique;
font-family:Cambria, Algerian;
}
p {
font-family: Verdana;
font-style: italic;
border-left: 3px solid #FFFAFA;
width:90%;
margin-left:4%;
padding: 25px;
}
</style>
</head>
<body>
<h2>Как правильно инвестировать в недвижимость</h2>
<div><h5>Только у нас вы узнаете все фишки правильного инвестирования. Мы предоставляем свежую информацию о финансовом рынке и о стоимости ценных бумаг компаний всего мира.
Гарантируем первую бесплатную консультацию с экспертом нашей биржи.</h5></div>
<p>Брокерская фирма "ХХХХХ" на рынке вот уже 15 лет. Наши трейдеры довольны предоставляемыми услугами. Для новичков и профессионалов мы организуем мастер-классы, бизнес-встречи, экономические и финансовые конференции...</p>
</body>
</html> |
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font-style</title> <style> body { background: #D3D3D3; margin:0; } h2 { padding-left:2%; font-family: Verdana, Helvetica, Calibri, sans-serif; border-bottom: 3px solid #FFFAFA; } div { border: 3px double; width: 74%; margin-left:13%; background: #EEE9E9; padding-left:3%; font-style: oblique; font-family:Cambria, Algerian; } p { font-family: Verdana; font-style: italic; border-left: 3px solid #FFFAFA; width:90%; margin-left:4%; padding: 25px; } </style> </head> <body> <h2>Как правильно инвестировать в недвижимость</h2> <div><h5>Только у нас вы узнаете все фишки правильного инвестирования. Мы предоставляем свежую информацию о финансовом рынке и о стоимости ценных бумаг компаний всего мира. Гарантируем первую бесплатную консультацию с экспертом нашей биржи.</h5></div> <p>Брокерская фирма «ХХХХХ» на рынке вот уже 15 лет. Наши трейдеры довольны предоставляемыми услугами. Для новичков и профессионалов мы организуем мастер-классы, бизнес-встречи, экономические и финансовые конференции…</p> </body> </html>
На этой ноте я хочу подытожить статью о курсивном представлении текста. Надеюсь публикация оказалась для вас информативной и полезной. А если вы согласились с предыдущим предложением, то обязательно вступайте в ряды моих подписчиков и приглашайте друзей. Желаю удачи в обучении!
Пока-пока!
С уважением, Роман Чуешов
Загрузка…Прочитано: 55 раз
Как правильно сделать текст курсивом?
html: CSS / HTML: Как правильно сделать текст курсивом?Italic TextЭто «старый способ». не имеет смыслового значен» />
Issue.Life
CSS / HTML: Как правильно сделать текст курсивом?
12 ответа
8158 Репутация автора
Как правильно сделать текст курсивом? Я видел следующие четыре подхода:
<i>Italic Text</i>
<em>Italic Text</em>
<span>Italic Text</span>
<span>Italic Text</span>
Это «старый способ». <i>не имеет смыслового значения и передает только презентационный эффект выделения текста курсивом. Насколько я вижу, это явно неправильно, потому что это не семантическое.
Это использует семантическую разметку для чисто презентационных целей. Просто так получается, что <em>по умолчанию текст отображается курсивом, и поэтому его часто используют те, кто знает, что этого <i>следует избегать, но не знает о его семантическом значении. Не весь курсив является курсивом, потому что он выделен. Иногда, это может быть полная противоположность, как примечание стороны или шепот.
Это использует класс CSS для размещения презентации. Это часто рекламируется как правильный путь, но опять же, это кажется мне неправильным. Похоже, это не передает больше смыслового значения <i>. Но, как утверждают его сторонники, гораздо легче изменить весь текст, выделенный курсивом, позже, если, скажем, вы хотите, чтобы он был жирным. Но это не так, потому что тогда я остался бы с классом «курсив», который делал текст жирным. Кроме того, неясно, почему я бы хотел изменить весь курсивный текст на моем веб-сайте или, по крайней мере, мы можем подумать о случаях, когда это было бы нежелательно или необходимо.
Это использует класс CSS для семантики. Пока что это лучший способ, но на самом деле у него две проблемы.
Не весь текст имеет достаточное значение, чтобы гарантировать семантическую разметку. Например, действительно ли выделенный курсивом текст внизу страницы является сноской? Или это в сторону? Или что-то еще полностью. Возможно, он не имеет особого значения и должен быть выделен только курсивом, чтобы отделить его от текста, предшествующего ему.
Семантическое значение может измениться, когда оно не присутствует в достаточной силе. Допустим, я согласился с «сноской», основанной только на тексте, который находится внизу страницы. Что происходит, когда через несколько месяцев я хочу добавить больше текста внизу? Это больше не сноска. Как мы можем выбрать семантический класс, который менее универсален,
Похоже, что требование семантики кажется чрезмерно обременительным во многих случаях, когда стремление сделать что-то курсивом не должно нести смысловой смысл.
Кроме того, стремление отделить стиль от структуры привело к тому, что CSS стал заменой тому, <i>когда бывают случаи, когда это на самом деле будет менее полезным. Таким образом, это оставляет меня со скромным <i>тэгом и мне интересно, является ли этот ход мыслей причиной, по которой он остался в спецификации HTML5?
Есть ли хорошие посты в блоге или статьи на эту тему? Возможно, те, кто участвует в решении сохранить / создать <i>тег?
Ответы (12)
9 плюса
6941 Репутация автора
Я не эксперт, но я бы сказал, что если вы действительно хотите быть семантическим, вы должны использовать словари (RDFa).
Это должно привести к чему-то вроде этого:
<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>
emиспользуются для представления (люди будут видеть его курсив) , а propertyи hrefатрибуты ссылок на определение того , что является наклонным (для машин).
Вы должны проверить, есть ли словарь для такого рода вещей, возможно, свойства уже существуют.
Больше информации о RDFa здесь: http://www.alistapart.com/articles/introduction-to-rdfa/
Автор: Guillaume Flandre Размещён: 21.01.2010 10:310 плюса
12589 Репутация автора
ОК, первое, что нужно отметить, это то, что <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.01.2010 10:37-1 плюса
3 Репутация автора
Используйте , если вам нужно несколько слов / символов курсивом в контенте без других стилей. Это также помогает сделать контент семантическим.
text-style лучше подходит для нескольких стилей и не требует семантической необходимости.
5 плюса
66347 Репутация автора
Возможно, он не имеет особого значения и должен быть выделен только курсивом, чтобы отделить его от текста, предшествующего ему.
Если это не имеет особого значения, почему его необходимо отделять от текста, предшествующего ему? Этот фрагмент текста выглядит немного странно , потому что я выделил его курсивом без причины.
Я все же понимаю вашу точку зрения. Для дизайнеров весьма обычно производить проекты, которые изменяются визуально, не изменяя осмысленно. Я видел это чаще всего с блоками: дизайнеры предоставят нам дизайны, включая блоки с различными комбинациями цветов, углов, градиентов и теней, без связи между стилями и смыслом контента.
Потому что это достаточно сложные стили (с сопутствующими вопросами Internet Explorer) повторно используемые в разных местах, мы создаем классы , как box-1, box-2так что мы можем повторно использовать стили.
Конкретный пример создания некоторого текстового курсива слишком тривиален, чтобы о нем волноваться. Лучше оставь такие мелочи, чтобы Семантические Наттеры спорили.
Автор: Paul D. Waite Размещён: 21.01.2010 10:3821 плюса
60660 Репутация автора
<i>не неправильно, потому что это не семантическое. Это неправильно (обычно), потому что это презентационно. Разделение проблем означает, что презентационная информация должна передаваться с помощью CSS.
В целом, назвать имена сложно, и имена классов не являются исключением, но, тем не менее, это то, что вам нужно сделать. Если вы используете курсив, чтобы выделить блок из основного текста, то, возможно, имя класса «различим по потоку» будет в порядке. Подумайте о повторном использовании: имена классов предназначены для категоризации — где еще вы хотели бы сделать то же самое? Это должно помочь вам определить подходящее имя.
<i>включен в HTML5, но ему дана конкретная семантика. Если причина, по которой вы помечаете что-то курсивом, соответствует одной из семантик, указанных в спецификации, было бы целесообразно использовать <i>. В противном случае нет.
1 плюс
36467 Репутация автора
iЭлемент не является семантическим, поэтому для программ чтения с экрана, Googlebot и т. д. он должен быть прозрачным (как spanи divэлементы). Но это не очень хороший выбор для разработчика, потому что он объединяет уровень представления со структурным уровнем — и это плохая практика.
emэлемент ( strongтакже) должен всегда использоваться в семантическом контексте, а не в презентационном. Это должно использоваться всякий раз, когда какое-то слово или предложение важны. Просто для примера в предыдущем предложении я должен использовать, emчтобы сделать больший акцент на части «должен быть всегда использован». Браузеры предоставляют некоторые свойства CSS по умолчанию для этих элементов, но вы можете и должны переопределять значения по умолчанию, если ваш дизайн требует, чтобы это сохраняло правильное семантическое значение этих элементов.
<span>Italic Text</span>это самый неправильный путь. Прежде всего, это неудобно в использовании. Во-вторых, это предполагает, что текст должен быть курсивом. И структурный слой (HTML, XML и т. Д.) Никогда не должен этого делать. Презентация всегда должна быть отделена от структуры.
<span>Italic Text</span>кажется, лучший способ для сноски. Он не предлагает какую-либо презентацию, просто описывает наценку. Вы не можете предсказать, что произойдет в функции. Если сноска будет расти в функции, вы можете быть вынуждены изменить имя класса (чтобы сохранить логику в вашем коде).
Так что всякий раз, когда вы используете какой-то важный текст emили strongподчеркиваете его. Но помните, что эти элементы являются встроенными элементами и не должны использоваться для выделения большого блока текста.
Используйте CSS, если вы заботитесь только о том, как что-то выглядит, и всегда старайтесь избегать лишней разметки.
Автор: Crozin Размещён: 21.01.2010 11:021 плюс
6415 Репутация автора
Я думаю, что ответ заключается в том, чтобы использовать, <em>когда вы намерены подчеркнуть.
Если при чтении текста для себя вы обнаружите, что вы используете немного другой голос, чтобы подчеркнуть точку зрения, то вам следует использовать ее, <em>потому что вы хотите, чтобы программа чтения с экрана делала то же самое.
Если это чисто стилевая вещь, как, например, ваш дизайнер решил, что все ваши <h3>заголовки будут выглядеть лучше курсивом Garamond, то нет никакой смысловой причины включать его в HTML, и вам просто нужно изменить CSS для соответствующих элементов.
Я не вижу никакой причины для использования <i>, если вам не требуется поддержка какого-либо устаревшего браузера без CSS.
197 плюса
42250 Репутация автора
РешениеВы должны использовать разные методы для разных вариантов использования:
- Если вы хотите подчеркнуть фразу, используйте
<em>. <i>Тег имеет новый смысл в HTML5 , представляющий «пролет текста в альтернативном голосе или настроении». Таким образом, вы должны использовать этот тег для таких вещей, как мысли / отступления или идиоматические фразы. Спецификация также предлагает названия кораблей (но больше не предлагает названия книг / песен / фильмов; используйте<cite>вместо этого).- Если выделенный курсивом текст является частью более крупного контекста, скажем, вводного абзаца, вы должны прикрепить стиль CSS к большему элементу, т.е.
p.intro { font-style: italic; }
0 плюса
1880 Репутация автора
Я бы сказал, использовать, <em>чтобы подчеркнуть встроенные элементы. Используйте класс для блочных элементов, таких как блоки текста. CSS или нет, текст все еще должен быть помечен. Будь то для семантики или для визуальной помощи, я предполагаю, что вы будете использовать его для чего-то значимого …
Если вы подчеркиваете текст по ЛЮБОЙ причине, вы можете использовать <em>или класс, выделенный курсивом.
Нормально иногда нарушать правила !
Автор: tahdhaze09 Размещён: 21.01.2010 02:17-3 плюса
335 Репутация автора
ДЕЛАТЬ
Присвойте атрибуту класса значение, указывающее на характер данных (т.е.
class="footnote"это хорошо)Создайте таблицу стилей CSS для страницы
Определите стиль CSS, который присоединен к классу, который вы назначаете элементу
.footnote { font-style:italic; }
НЕ ДЕЛАЙТЕ
- Не используйте элементы
<i>или<em>элементы — они не поддерживаются и слишком тесно связывают данные и представление. - Не присваивайте классу значение, которое указывает правила представления (т.е. не используйте
class="italic").
7 плюса
2517 Репутация автора
Правильный способ сделать текст курсивом — игнорировать проблему, пока не дойдете до CSS, а затем стилизовать в соответствии с семантикой представления. Первые два варианта, которые вы предоставили, могут быть правильными в зависимости от обстоятельств. Последние два неверны.
Не беспокойтесь о представлении при написании разметки. Не думай курсивом. Думайте с точки зрения семантики. Если это требует акцента на стресс, то это em. Если это касается основного контента, то это aside. Может быть, это будет жирным шрифтом, возможно, это будет курсивом, может быть, это будет флуоресцентный зеленый. Неважно, когда вы пишете разметку.
Когда вы дойдете до CSS, у вас уже может быть семантический элемент, который имеет смысл размещать курсивом для всех его вхождений на вашем сайте. emхороший пример Но, может быть, вы хотите, чтобы все aside > ul > liна вашем сайте курсивом. Вы должны отделить размышления о разметке от размышлений о презентации.
Как уже упоминалось, DisgruntledGoat i является семантическим в HTML5. Хотя семантика мне кажется довольно узкой. Использование, вероятно, будет редким.
Семантика emв HTML5 изменилась, чтобы подчеркнуть акцент. strongможет быть использован, чтобы показать важность, а также. strongможет быть курсивом, а не жирным шрифтом, если вы хотите его оформить. Не позволяйте таблице стилей браузера ограничивать вас. Вы даже можете использовать таблицу стилей сброса, чтобы помочь вам перестать думать в рамках значений по умолчанию. (Хотя есть некоторые оговорки .)
class="italic"плохо. Не используйте это. Это не семантическое и не гибкое вообще. Презентация все еще имеет семантику, просто отличную от разметки.
class="footnote"эмулирует семантику разметки, а также неверен. Ваш CSS для сноски не должен быть полностью уникальным для вашей сноски. Ваш сайт будет выглядеть слишком грязно, если каждая часть оформлена по-разному. У вас должно быть несколько визуальных шаблонов, разбросанных по вашим страницам, которые вы можете превратить в классы CSS. Если ваш стиль для ваших сносок и ваших цитат очень похож, то вы должны поместить сходство в один класс, а не повторять себя снова и снова. Вы можете рассмотреть вопрос о принятии практики OOCSS (ссылки ниже).
Разделение проблем и семантики велики в HTML5. Люди часто не понимают, что разметка не единственное место, где важна семантика. Существует семантика контента (HTML), но есть также семантика представления (CSS) и семантика поведения (Javascript). У всех них есть своя отдельная семантика, на которую важно обращать внимание для удобства обслуживания и сохранения СУХОГО состояния.
OOCSS Resources
Автор: Eva Размещён: 06.09.2013 12:461 плюс
4630 Репутация автора
Текст курсивом HTML отображает текст курсивом.
<i>HTML italic text example</i>
Акцент и сильные элементы могут быть использованы для повышения важности определенных слов или предложений.
<p>This is <em>emphasized </em> text format <em>example</em></p>
Метка выделения следует использовать, когда вы хотите выделить точку в вашем тексте, а не обязательно, когда вы хотите выделить этот текст курсивом.
См. Это руководство для получения дополнительной информации: http://www.snoopcode.com/html/html-text-formating.
Автор: Prabhakar Размещён: 29.11.2015 04:23Вопросы из категории :
32×32html — CSS / HTML: Что такое правильный способ сделать текст курсивом?
Что такое правильный способ сделать текст курсивом? Я видел следующие четыре подхода:
<i>Italic Text</i>
<em>Italic Text</em>
<span class=italic>Italic Text</span>
<span class=footnote>Italic Text</span>
Это «старый путь». <i>не имеет смысловое значение и только передает презентационный эффект сделать текст курсивом. Насколько я могу видеть, что это явно не так , потому что это не-семантический.
Это использует семантические наценки для чисто презентационных целей. Это просто случается , что <em>по умолчанию делает текст курсивом и поэтому он часто используется теми , кто знает , что <i>следует избегать , но которые не знают о его смыслового значения. Не все курсивный текст написан курсивом , потому что подчеркивается. Иногда это может быть с точностью до наоборот, как примечание стороны или шепотом.
При этом используется класс CSS для размещения презентации. Это часто преподносится как правильный путь , но опять же , это кажется мне неправильным. Это не появляется , чтобы передать какое -то более смысловое значение , что <i>. Но его сторонники плакать, гораздо легче изменить все ваши курсива позже , если вы, скажем, хотели жирный шрифт. Но это не так , потому что я тогда остались бы с классом под названием «курсив», вынесший текст жирным шрифтом. Кроме того, не ясно , почему я никогда не хочу , чтобы изменить весь курсив на моем сайте или по крайней мере , мы можем думать о тех случаях, когда это не было бы желательными или необходимыми.
При этом используется класс CSS для семантики. До сих пор это, кажется, лучший способ, но он на самом деле есть две проблемы.
Не весь текст имеет достаточный смысл, чтобы оправдать семантическую разметку. Например, является ли текст курсивом в нижней части страницы, на самом деле сноски? Или это в стороне? Или что-то совсем другое. Может быть, это не имеет особого значения, и нужно только быть оказано курсивом, чтобы отделить его presentationally из текста предшествующего ему.
Семантический смысл может измениться , когда его нет в достаточной прочности. Допустим , я пошел вместе с «сноска» на основе не более чем текст остающейся в нижней части страницы. Что происходит , когда несколько месяцев спустя я хочу , чтобы добавить текст в нижней части ? Это больше не сноска. Как мы можем выбрать семантический класс , который является менее общим , чем ,
<em>но позволяет избежать этих проблем?
Представляется, что требование семантики, кажется, слишком обременительным во многих случаях, когда желание сделать что-то наклонным не означало нести смысловую.
Кроме того, стремление отделить стиль от структуры привело CSS быть рекламируются в качестве замены , <i>когда есть случаи , когда это будет на самом деле быть менее полезным. Так что это оставляет меня с скромному <i>теге и интересно , этот ход мыслей , является ли причина , почему он остается в спецификации HTML5?
Есть ли какие — нибудь хорошие сообщения в блоге или статьи на эту тему, а? Возможно , тех , кто участвует в решении сохранить / создать <i>тег?
Как сделать курсив на css, если у шрифта нет стиля Italic (курсив). Для CSS font-face
С появлением возможности подключать различные шрифты в CSS появилась дополнительная головная боль: не у всех шрифтов есть все стили, и из-за этого страдает типографика страницы (где-то нужно сделать выделение курсивом, а его просто нет в подключаемом шрифте, и CSS не может сделать oblique, потому, что не знает как с этим шрифтом работать).
Предлагаем вашему вниманию решение, которое мы применили недавно в одном из наших проектов.
Откуда растут ноги проблемы «как сделать курсив на CSS, если у шрифта нет italic»?
Дизайнер выбрал для отображения цены акцидентный шрифт Russo One, у которого нет курсива. В процессе дизайн-мышления добавил ему искусственный наклон, получился Italic. И самое страшное! Клиент утвердил такой макет. Верстальщик пытался найти какой-то способ, но не получилось. Вот и родилось такое решение.
Как получилось в вёрстке
Как нарисовал дизайнер
Решение с курсивом для некурсивных шрифтов на CSS
Создадим свой шрифт, с искусственно наклоненными буквами (только теми, которые нам нужны), и будем его использовать в тех местах, где нужно.
Дизайнеры и шрифтовики будут кричать, что так делать ни в коем случае нельзя (это не хорошо искривлять шрифт), но нам повезло, Russo One наклонным выглядит достаточно органично.
Итак:
1) пишем все символы, которые нам потребуются обычным шрифтом в каком-нибудь графическом редакторе, мы выбрали Illustrator
2) переводим все символы в кривые, чтобы можно было их наклонить
3) сохраняем каждый символ в отдельный SVG файл
4) упаковываем их в шрифт с помощью сервиса fontello.com
5) используем в CSS
Возможности fontello.com
Fontello.com предназначен для создания иконочных шрифтов, поэтому у него есть возможность загрузить свой набор иконок в формате SVG, и указать для них коды символов, которые будут соответствовать определенной иконке в шрифте. То есть для нашего шрифта для каждой цифры нужно будет указать соответствующую цифру. В итоге, даже если шрифт не прогрузится, то текст, написаный этим шрифтом будет отображаться правильно, просто не так красиво.
Для наших целей всё получилось очень неплохо. Конечно межбуквенное расстояние в иконочном шрифте на fontello задать не получилось, поэтому если таким образом переделать все символы и напечатать обычный текст, а не цифру, будут проблемы с пробелами в тексте. Но цена выглядит как на макете.
Пошагово, как мы делали курсива на css если у шрифта нет italic, смотрите на видео.
146
Также рекомендуем:
Как сделать текст курсивным в CSS?
Я знаю, что это легко, но по какой-то причине я не могу найти этот ответ. Я перепробовал все, используя font-family и font-style.
cssПоделиться Источник DavidAlexanderPerez 12 марта 2018 в 02:49
5 Ответов
1
Вы можете использовать следующее правило:
шрифт-стиль: курсив;
Так что это будет выглядеть примерно так:
p.italic {
font-style: italic;
}<p>This is normal text.</p>
<p>This is italic text.</p> Поделиться BenjB 12 марта 2018 в 03:00
0
Ну, если вы хотите использовать курсивный шрифт (или любой другой пользовательский шрифт), я рекомендую использовать https://cooltext.com/ . Перейдите в раздел «fonts» в верхней части главной страницы, и там есть различные категории, которые вы можете выбрать. «Cursive» — это то, что вам нужно, я полагаю. Выберите шрифт, который вы хотите, и загрузить файл .zip. Извлеките его и все такое, а затем преобразуйте в файл .woff, используя http://ttf2woff.com/ (поверьте мне, он должен быть в формате .woff для веб-страниц. Я испытал гнев и страдание от этого…) Надеюсь, это поможет! ..
.Или вы могли бы просто сделать то, что предлагали все остальные, это тоже прекрасно.
Поделиться AidanM 12 марта 2018 в 02:52
0
Вы можете либо использовать курсивный шрифт CSS, либо использовать свойство letter-spacing , используя в качестве значения -1px :
p.cursive {
letter-spacing: -1px;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum placerat ligula mattis semper. Nunc ornare pellentesque arcu, malesuada ullamcorper est cursus at. Duis id nibh ligula. Nam maximus nibh finibus lorem laoreet, vel tincidunt purus ornare. Nulla molestie eu massa et elementum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum placerat ligula mattis semper. Nunc ornare pellentesque arcu, malesuada ullamcorper est cursus at. Duis id nibh ligula. Nam maximus nibh finibus lorem laoreet, vel tincidunt purus ornare. Nulla molestie eu massa et elementum.</p>Поделиться Obsidian Age 12 марта 2018 в 02:53
0
Это должно сработать…
span {
font-family: cursive;
}<span>Cursive text</span>Поделиться Jorge Altieri 12 марта 2018 в 02:56
0
Вы можете использовать свойство font-family .
p {
font-family: cursive;
}<p>some text in cursive font</p>Поделиться sol 12 марта 2018 в 02:57
CSS/HTML: Как правильно сделать текст курсивным?
Как правильно сделать текст курсивным? Я видел следующие четыре подхода: <i>Italic Text</i> <em>Italic Text</em> <span class=italic>Italic Text</span> <span…
Как сделать так, чтобы мой текст был полужирным и курсивным в iText?
Я пытаюсь сделать свой текст полужирным и курсивным одновременно для абзаца в документе PDF с использованием iText. Я могу использовать любой из них для полужирного и курсивного соответственно, но…
Есть ли способ сделать курсивный текст внутри курсивного текста не курсивным?
Как правило, способ подчеркнуть текст в тексте курсивом-сделать его не курсивным. Например: Публикация Улисса Джеймса Джойса была встречена большими спорами. Я знаю, что смогу это сделать: em em {…
Как сделать выделенный текст в текстовой области полужирным, курсивным и т. д., а затем добавить его в форматированный текст?
Я сделал выделенный текст в текстовой области полужирным, курсивным и т. д., Но я не могу поддерживать свойства полужирного курсива при добавлении текста в форматированный текст.
Используя CGContext, как сделать шрифт курсивным или полужирным?
Я могу использовать CGContextSelectFont, чтобы выбрать fontType, fontSize. Но как сделать шрифт курсивным или полужирным? тнх
Добавить цветную строку с курсивным шрифтом в текст подсказки
Как добавить цветную строку с курсивным шрифтом в текст подсказки? На самом деле я переопределил метод getToolTipText(MouseEvent e) из JComponent в Core java и добавил к нему некоторый tooltiptext…
Как сделать текст тоньше в CSS?
Когда я вставляю тег <h2> , текст выглядит так, как будто он был выделен жирным шрифтом. Как сделать текст тоньше в CSS?
Как сочетать полужирный и курсивный шрифт в CSS?
Этот учебник W3Schools научил меня, как использовать свойство CSS font-style , чтобы сделать текст полужирным (эквивалентно <b&g>this</b> в старомодном HTML), а также как сделать…
Выделите текст жирным шрифтом и курсивом
Есть ли вообще возможность сделать текст Android в файле xml как полужирным, так и курсивным? SAMPLE
Возможно ли иметь 2 разных значения для одного и того же свойства в CSS?
При выполнении примера с целью тестирования CSS я попробовал следующее: Добавление 2 CSS значений к одному и тому же свойству не вступает в силу, даже если используется для одного селектора. p{…
Как делать стили для текста
WEB страничка
Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру, <h2></h2> — заголовок раздела первого уровня, а <h6></h6> — заголовок раздела шестого уровня. От обычного текста заглавия отличаются размером и шириной букв. Заголовок первого уровня h2 отображается обычно очень большим шрифтом, в то время как заголовок шестого уровня h6 — очень маленьким.
Заглавия
Не следует путать заглавия разделов документа с рассмотренным ранее заголовком документа, определяемым элементом <head></head>.
В качестве заголовка текста используем первое предложение — Добро пожаловать на страницу компании SD! Для этого довольно ограничить его тегами <h2> и </h2>.
Воткните в текст файла other.html теги <h2> и </h2> так, чтоб они ограничивали первое предложение текста, и этот кусок кода принял последующий вид:
<h2>Добро пожаловать на страницу компании SD!</h2>
Просмотрим приобретенный итог.
Сохраните файл, выбрав команду меню программки Блокнот (Notepad) Файл — Сохранить (File — Save).
Операцию сохранения нужно всегда делать перед просмотром документа, потому что браузер открывает файл для просмотра, загружая его в оперативку компьютера с диска. Если после редактирования кода HTML вы не сохраните файл, то никаких конфигураций в браузере не увидите.
Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).
Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки Internet Explorer. Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.
Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h3, h4 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.
Когда вы закончите опыты, опять восстановите в файле other.html теги <h2></h2>.
Используя 6 уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно сделать просто читаемый документ с интуитивно ясной структурой. Помните, что ваш документ всегда будет читаться существенно лучше, если в нем будет точное разделение на разделы и подразделы.
Выравнивание заголовков
По умолчанию заголовок выравнивается по левому краю странички. Но его можно также выровнять по правому краю либо центрировать. Для правостороннего выравнивания в теге <h2> употребляется атрибут align=»right», а для центрирования — align=»center». Допускается также очевидное указание левостороннего выравнивания — align=»left».
Добавьте в тег <h2> атрибут align=»center», чтоб центрировать заголовок. Этот элемент должен принять последующий вид:
<h2 align=»center»>Добро пожаловать на страницу компании SD!</h2>
В предстоящем мы не будем припоминать для вас о необходимости перед просмотром сохранять файл с начальным кодом и обновлять изображение в браузере.
Как в HTML сделать текст выделенным (жирным)
Сейчас займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания употребляются парные теги <strong></strong>.
Воткните в файле other.html открывающий <strong> и закрывающий </strong> теги так, чтоб они ограничили текст Тут вы узнаете… Этот элемент должен принять последующий вид:
<strong>Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</strong>
Как в HTML сделать текст курсивом
Курсивное начертание устанавливается при помощи тегов <em></em>.
Воткните в начальный код HTML тег <em> и </em> так, чтоб отредактированный элемент принял последующий вид:
<strong><em>Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</em></strong>
Элементы разметки могут быть вложенными, как в данной структуре, где элемент <em>…</em> вложен в элемент <strong>…</strong>. Современные браузеры способны верно обрабатывать вложенные теги. Потому для вас нужно смотреть за тем, чтоб не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. К примеру, такая запись будет неверной: <strong><em>…</strong></em>. Соблюдение вложенности — очень принципиальная часть общей культуры написания HTML кода.
Как в HTML сделать текст подчеркнутым
При помощи пары тегов <u></u> можно установить подчеркнутое начертание текстового куска, ограниченного данными тегами, а при помощи пары тегов <tt></tt> — показать текст телетайпным шрифтом.
Необходимо отметить, что с недавнешних пор тег <u> упрознен и подчеркивание делается с помощью стилей. <u> эквивалент <span>. Да новый аналог выглядет более громозким, но к огорчению это вернее. Основное в эту пользу гласит, то что громозкий варинат является кросбраузерным, другими словами подходит для всех браузеров, когда как <u> поддерживают далековато не все браузеры.
Как в HTML прирастить текст
Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.
Теги <big></big> наращивают размер шрифта текста, заключенного меж ними.
Добавьте в начало и конец вышеуказанного куска кода соответственно теги <big> и </big> так, чтоб элемент принял последующий вид:
<big><strong><em>Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</em></strong></big>
При помощи тегов <small></small> вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.
Другой метод указания размера шрифта — при помощи тегов <font></font> с атрибутом size. В качестве значений этого атрибута употребляются целые числа от 1 до 7. При этом значение 1 соответствует наименьшему размеру шрифта, а значение 7 — наибольшему.
Используя заместо тегов <big></big> теги вида <font size=»1″></font>, просмотрите как меняется размер шрифта текста при различных значениях атрибута size — от 1 до 7.
В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) либо — (минус). В данном случае размер шрифта соответственно возрастает либо миниатюризируется, по сопоставлению с начальным, к примеру, теги <font size=»+1″></font> прирастят размер шрифта, по сопоставлению с текущим, на один уровень. Проверьте.
Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: <font size=»5″></font>. HTML код этого куска должен быть таким:
<font size=»5″><strong><em>Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим </em></strong></font>.
В тегах <font></font> может употребляться также атрибут color для указания цвета шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа.
По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов <center></center>. Вы сможете также выровнять абзац по правому краю странички при помощи тегов <right></right> либо по левому — при помощи тегов <left></left>.
Воткните теги <center></center> ограничив ими обозначенный абзац.
Направьте внимание, что для центрирования абзаца мы использовали теги <center></center>, в отличие от атрибута align=»center», который применен нами в тегах <h2></h2>.
Внимание! На 2010 год теги <big>, <center>, <left>, <right> числятся устаревшими и потому требуется использовать аналоги из стилей. Это не означает, что использовать их нельзя, но при способности пытайтесь от их избавляться.
<big></big>=<span></span>
<center></center>=<span></span>
<left></left>=<span></span>
<right></right>=<span></span>
<font></font>=<span></span>
Также существует огромное количество других устаревших тегов, которые не обрисовать в этой статье, потому лучше сходу ознакомиться на специализированных WEB сайтах по данному вопросу. Но главные я выложил тут чуток выше
Коды выделения
Язык HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на неком участке текста может быть полужирным либо курсивным, другими словами очевидно указать начертание шрифта текста, как мы это делали в данном опыте. С другой стороны, можно пометить хоть какой кусок текста, как имеющий некоторый, хороший от обычного, логический стиль, предоставив интерпретацию этого стиля браузеру. Таким макаром, логический стиль показывает роль текстового куска, к примеру, огромную значимость по сопоставлению с обыденным текстом либо то, что данный кусок является цитатой. В собственной работе вы сможете использовать последующие теги, определяющие логические стили. Проверьте, как они работают в различных браузерах.
<dfn></dfn> — применяется для определения слова. Текст выводится курсивом по умолчанию.
<em></em> — для выделения слов и усиления. Текст отображается курсивом по умолчанию.
<cite></cite> — для выделения заглавий книжек, кинофильмов, спектаклей и так далее выводится курсивом по умолчанию.
<code></code> — для фрагментов кода программ. Показывается на дисплее шрифтом фиксированной ширины.
<kbd></kbd> — употребляется для текста, который пользователь вводит с клавиатуры. В различных браузерах может отображаться различными шрифтами. Тег устаревший.
<samp></samp> — служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший.
<strong></strong> — для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.
<var></var> — употребляется для указания, что часть текста либо слово является символьной переменной, другими словами текстом, который может быть заменен разными выражениями. Отображается курсивом по умолчанию. Тег устаревший.
Спецификация HTML 4.0 предлагает более прогрессивный метод указания стилей текста и других частей — при помощи специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей — это огромное достижение в области WEB дизайна, расширяющее способности улучшения внешнего облика страничек. Таблицы стилей упрощают определение интервалов меж строчками, отступов, цветов, применяемых для текста и фона, размера и стиля шрифтов и так далее Стиль большинства частей HTML может описываться при помощи атрибута style, который размещается внутри открывающего тега элемента. В качестве значения атрибута style употребляются пары вида «свойство: значение». К примеру, во куске кода, описывающего заголовок раздела, <h2> атрибут определяет, что свойство color (цвет) имеет значение blue (голубой), другими словами текст заголовка первого уровня должен отображаться голубым цветом.
Выравнивание стилями
Поглядим, как при помощи языка каскадных таблиц стилей указать стиль текстового куска, который начинается словами Тут Вы узнаете…
Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру,.
Для определения курсивного начертания применяется свойство font-style со значением italic. Потому, чтоб придать тексту полужирное курсивное начертание, следует атрибут style найти так:. Направьте внимание: характеристики могут размещаться в любом порядке и непременно обязаны делиться точкой с запятой.
Если требуется указать размер шрифта, то следует пользоваться свойством font-size, значения которого можно указать в относительных либо абсолютных величинах. Относительные величины — это проценты, а в качестве абсолютных величин употребляются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). К примеру:
style=»font-size: 200%»
style=»font-size: 16pt»
style=»font-size: 100px»
Указывая абсолютные, а не относительные размеры, вы лишаете пользователей, разглядывающих ваши странички, способности наращивать либо уменьшать размер шрифтов при помощи команды меню браузера в согласовании с их зрением и разрешением монитора. Шрифты будут отображаться только такового размера, который вы указали. Потому лучше указывать размер шрифта в процентах. В данном случае размер шрифта будет меньше либо больше на обозначенное количество процентов, чем при оформлении его при помощи HTML тега по умолчанию.
Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:
style=»font-weight: bold; font-style: italic; font-size: 150%; text-align: center»
Этот атрибут мы применим в тегах <р></р>, которые позволяют представить текст в виде отдельного абзаца.
Отредактируйте элемент HTML, включающий текст Тут Вы узнаете… удалив теги <center></center>, <font size=5></font>, <strong></strong>, <em></em> и вставив теги <р> и </р> с атрибутом style так, чтоб этот элемент принял последующий вид:
<р>Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим</р>
Видите ли, язык HTML позволяет использовать различные методы стилевого дизайна. Совместно с тем, применение языка каскадных таблиц стилей CSS является более желаемым.
Другие варианты выравнивания и использования стилей
Мы разглядели только один вариант использования языка таблиц стилей, когда определение стиля размещается конкретно внутри тега элемента, который вы описываете.
Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.
В стандартном HTML, без внедрения таблиц стилей, для присвоения какому-либо элементу определенных параметров, таких как цвет, размер, положение на страничке и тому схожее, приходится всякий раз обрисовывать эти характеристики для каждого элемента, даже если на одной страничке обязаны размещаться 10-ки таких частей, не отличающихся один от другого. Приходится 10-ки раз вставлять один и тот же кусок HTML кода в страничку, увеличивая размер файла и время его загрузки из сети.
Таблицы стилей действуют другим, более комфортным и экономным методом. Для присвоения какому-либо элементу определенных черт вы обязаны один раз обрисовать этот элемент и найти это описание как стиль, а в предстоящем просто указывать, что элемент, который вы желаете оформить подходящим образом, должен принять характеристики стиля, описанного вами. Комфортно, не правда ли?
Более того, вы сможете сохранить описание стиля не в тексте вашей WEB странички, а в отдельном файле — это дозволит использовать описание стиля на любом количестве WEB страничек. И очередное, связанное с этим преимущество — возможность поменять оформление хоть какого количества страничек, исправив только описание стиля в одном отдельном файле.
Не считая того, язык таблиц стилей позволяет работать со шрифтовым оформлением страничек на еще более высочайшем уровне, чем стандартный HTML.
В текущее время язык CSS насчитывает достаточно огромное количество параметров частей HTML, которыми он может управлять. Применяя «безопасные», другими словами совместимые с наибольшим количеством браузеров элементы CSS — характеристики шрифта, цвета частей и фона, характеристики текста и границ — вы сможете существенно облегчить свою работу и сделать ваши WEB странички более симпатичными в плане дизайна текста.