Css курсивный текст: Курсив и жирный шрифт CSS — учебник CSS

Leave a Comment / Css / By /

Содержание

CSS шрифты (шрифт)

Предыдущий: CSS Текст (текст)

ссылка CSS (ссылка): Следующий

Свойства CSS шрифта определить шрифт, жирный, размер, стиль текста.

Разница между засечками и без засечек шрифты между

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

CSS шрифт

В CSS существует два типа имен семейств шрифтов:

  • Родовой семейство шрифтов — имеет аналогичные комбинации системы внешний вид шрифта (например, «засечками» или «MONOSPACE»)
  • Конкретные семейство шрифтов — специфический семейство шрифтов (например, «Таймс» или «Курьер»)
Родовой семьи семейство шрифтов объяснение
засечка Times New Roman
Грузия		 Конец Serif шрифты имеют дополнительные символы в строке декоративных
Рубленый Arial
Verdana		 «Санс» означает без — эти шрифты в конце без дополнительного декора
Monospace Courier New
Lucida Console		 Все моноширинные символы имеют одинаковую ширину

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

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

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

Примечание: Если имя семейства шрифтов больше , чем одно слово, оно должно быть заключено в кавычки, например, Font Family: «Times New Roman» .

Множественный семейство шрифтов задается разделенных запятыми:

примеров

p{font-family:»Times New Roman», Times, serif;}

Попробуйте »

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

стиль шрифта

Главным образом атрибут определяет стиль шрифта курсива.

Это свойство имеет три значения:

  • Normal — нормальный текстовый дисплей
  • Курсив — текст отображается курсивом
  • Асимметричный характер — одна сторона склонна к тексту (и очень похож на курсив, но менее поддерживается)

примеров

p. normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Попробуйте »


Размер шрифта

Размер имущества размер шрифта текста.

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

Обязательно используйте правильный HTML-теги в <h2> — <h6> представляет заголовок и <р> представляет абзац:

Шрифт значение размера может быть абсолютным или относительным размером.

Абсолютный размер:

  • Установите текст указанного размера
  • Мы не можем изменить размер текста во всех браузерах
  • Определить физический размер выходного абсолютного размера полезного

Относительный размер:

  • Что касается окружающих элементов, чтобы установить размер
  • Это позволяет пользователю изменять размер текста в браузере

Если вы не укажете размер шрифта, размер по умолчанию, а также обычные текстовые пункты, это 16 пикселей (16px = 1em).

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

Установка размера текста с пикселей, дает вам полный контроль над размер текста:

примеров

h2 {font-size:40px;}
h3 {font-size:30px;}
p {font-size:14px;}

Попробуйте »

В приведенном выше примере 9, Firefox, Chrome, Opera, Safari и, настроить размер текста путем расширения браузера Internet Explorer.

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

Используйте EM, чтобы установить размер шрифта

Для того чтобы избежать Internet Explorer не может быть отрегулирована в тексте, многие разработчики используют EM единиц, а не пикселей.

блок эм-размер рекомендуется W3C.

1em равен текущему размеру шрифта. В браузере по умолчанию размер текста 16px.

Поэтому, по умолчанию размер 1em является 16px. Следующая формула может быть преобразована в пикселах ЕМ: ПВ / 16 = EM

примеров

h2 {font-size:2.

5em;} /* 40px/16=2.5em */
h3 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Попробуйте »

В приведенном выше примере, размер ЕМ текста такой же, как и в предыдущем примере в пикселях. Тем не менее, если вы используете EM единиц, вы можете настроить размер текста во всех браузерах.

К сожалению, IE по-прежнему остается проблема связана с браузером. Изменять размер текста, то он будет меньше, чем обычно, или больше по размеру.

Использование комбинации процентов и EM

Во всех браузерах решений, набор <тело> элемент размер шрифта по умолчанию в процентах:

примеров

body {font-size:100%;}
h2 {font-size:2.5em;}
h3 {font-size:1.875em;}
p {font-size:0.875em;}

Попробуйте »

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

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

Установить шрифт полужирный
Этот пример показывает, как установить шрифт жирным шрифтом.

Вы можете установить изменение шрифта
Этот пример показывает, как установить изменения шрифта.

Все свойства шрифта в одной декларации
Этот пример демонстрирует, как использовать сокращённое свойство для установки свойств шрифта в одной декларации.

Все свойства CSS шрифта

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

Предыдущий: CSS Текст (текст)

ссылка CSS (ссылка): Следующий

Уроки CSS для новичков — Свойства шрифтов

Главная >> Уроки CSS



Сегодня я расскажу вам правду о шрифтах.

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

Листинг 7. Добавляем шрифты

<HTML>
  <HEAD>
    <TITLE>Реклама сайта</TITLE>
    <STYLE TYPE=»text/css»>
     h3{
        font-family:Garamond, «Times New Roman», Bodony, serif;
        font-size:x-large;
        font-style:normal;
        font-weight:bold;
        font-variant:small-caps
       }
     h5{
        font-family:Arial, Verdana, Helvetica, sans-serif;
        font-size:30px;
        font-style:italic;
        font-weight:600;
        font-variant:normal

       }
    </STYLE>
  </HEAD>
  <BODY>
    <h3>Дикая Правда</h3>
    <h5>на «www. dikarka.ru»</h5>
  </BODY>
</HTML>

Честно говоря, это не совсем хорошая запись, в CSS можно спокойно сделать и сокращенную запись, например такую:

Листинг 8.

<HTML>
  <HEAD>
    <TITLE>Реклама сайта</TITLE>
    <STYLE TYPE=»text/css»>
      h3{font: bold x-large normal small-caps Garamond, «Times New Roman», Bodony, serif }
      h5{font: italic 600 30px Arial, Verdana, Helvetica, sans-serif }
    </STYLE>
  </HEAD>
  <BODY>
    <h3>Дикая Правда</h3>
    <h5>на «www.dikarka.ru»</h5>
  </BODY>
</HTML>

В обоих случая результат будет одинаков:


Рис. 1.6. Со шрифтами лучше!

Как видим, к свойствам шрифта font можно отнести 5 пунктов:

  • font-family, отвечающий за гарнитуру шрифта;
  • font-size, который определяет размер шрифта;
  • font-style, который задает стиль шрифта — обычный, наклонный или курсивом;
  • font-weight, отвечающий на сколько жирненьким получится шрифт;
  • font-variant, указывающий на вариант начертания буковок — должны ли они быть все маленькими прописными или просто нормальными

Вот и рассмотрим подробно каждый этот пунктик.

Font-family

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

К нашему с вами счастью все шрифты решили разделить на пять семейств: семейство с засечками serif, семейство без засечек sans-serif, семейстов шрифтов с буквами одинаковой ширины monospace, семейство рукописных шрифтов cursive и, последнее семейство вычурных шрифтов, которые вообще редко у кого есть fantasy

Семейство serif

Одни шрифты — с засечками и называются они семейством serif.

Из латинских шрифтов к этому семейству относятся такие шрифты, как Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit.

Из кирилицы можно выделить шрифты Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst. Есть еще и другие — и арабские, и японские и еврейские…, но я сомневаюсь, что все они установлены на ваших компьютерах, дай бог, чтобы треть вышеперечисленных были под рукой…

Хотя… чего там выделываться и строить из себя слишком умную… Пользуйтесь шрифтами Times New Roman, Bodoni, Garamond и не ломайте себе и другим головы! Поэтому напишем просто:

Листинг 9.

<HTML>
  <HEAD>
    <TITLE>Семейство «serif»</TITLE>
    <STYLE TYPE=»text/css»>
      P{font-family:serif}
    </STYLE>

  </HEAD>
<BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www. dikarka.ru
    </P>
  </BODY>
</HTML>

И в окне браузера это будет выглядеть так:

«ДИКАЯ ПРАВДА» на www.dikarka.ru

А можем написать и так:

Листинг 10.

<HTML>
  <HEAD>
    <TITLE>Семейство «serif»</TITLE>
    <STYLE TYPE=»text/css»>
      P{font-family:Garamond}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И результат будет немного другой, но шрифт все равно с засечками!!!

«ДИКАЯ ПРАВДА» на www.dikarka.ru

Ну, и напишем еще вот так:

Листинг 11.

<HTML>
  <HEAD>
    <TITLE>Семейство «serif»</TITLE>
    <STYLE TYPE=»text/css»>
      P{font-family:Garamond, «Times New Roman», Bodony, serif}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www. dikarka.ru
    </P>
  </BODY>
</HTML>

«ДИКАЯ ПРАВДА» на www.dikarka.ru

И такая вот запись:

{font-family:Garamond, «Times New Roman», Bodony, serif}

для браузера будет означать — «Эта… как иво… напиши-ка мне все шрифтом Garamond, а если его нету, то хоть Times New Roman аль Bodony, а если и их нету, то хоть што-нибудь, но только с засечками плиииииииииииииииииз!!!»

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

Прошу обратить внимание что «Times New Roman» я поставила в кавычки — это не потому что он такой вот особенный, а просто… если название больше одного слова — то кавычки нужны. Правило такое есть. А если слово всего одно, то кавычки необязательны. Но если вас так распирает на кавычки — ставьте. Все равно это никто не заметит. Возни только больше.

И еще… само обозначение семейства ставьте в конец строчки!

Семейство «sans-serif»

Теперь пойдем в другой лагерь и познакомимся с семейством sans-serif. Это ребята простые как правда. Нет в них никаких таких засечек. Кстати, sans — как раз и означает «без». Без засечек. Про эти шрифты говорят, что они рубленые. К этому семейству относятся такие латинские шрифты как

Arial, Verdana, Helvetica, Tahoma, Futura. Вставим же в следующем примере строчку font-family:sans-serif:

Листинг 12.

<HTML>
  <HEAD>
    <TITLE>Семейство «sans-serif»</TITLE>
    <STYLE TYPE=»text/css»>
    P{font-family:sans-serif}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И сразу же увидим результат — шрифт без засечек:

«ДИКАЯ ПРАВДА» на www. dikarka.ru

И моя правда стала тоже простой, без всяких изысков. Так сказать Правда и только Правда.

Семейство cursive

Примером этого семейства может служить шрифт Caflish Script, Zapf-Chancery.

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

Семейство monospace

К этому семейству можно отнести шрифт Courier New, Prestige, Everson Mono. К достоинством этого шрифта можно отнести то, что все буковки по ширине одинаковы. Читать такой текст, конечно, не очень удобно. Но если в тексте важна каждая буковка, скажем, как в моих описаниях кодов, тогда этот шрифт как нельзя более кстати.

Листинг 13.

<HTML>
  <HEAD>
    <TITLE>Семейство «monospace»</TITLE>
    <STYLE TYPE=»text/css»>
    P{font-family: «Courier New», monospace}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www. dikarka.ru
    </P>
  </BODY>
</HTML>

Ну, и посмотрим, что же получилось:

«ДИКАЯ ПРАВДА» на www.dikarka.ru

Семейство fantasy

К этому семейству можно отнести шрифт Alpha Geometrique, Western.

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

Font-size

Ну, с этим дело пойдет веселее, и выбор тут тоже довольно богатый! И задать размеры можно несколькими способами! Во-первых, можно с помощью ключевых слов: xx-small; x-small; small; medium; large; x-large и xx-large. Наверняка, вы и сами догадались, что xx-small — самый мелкий шрифт, а xx-large — самый крупный.

Но и это не все! Шрифт можно задавать и в пунктах (pt), и в пикселях (px), и в дюймах (in), и в миллиметрах (mm), сантиметрах (cm), пиках (pc) и просто в процентах (%)!

Но и это не все! С помощью слов smaller или larger можно уменьшить или увеличить отдельные слова по сравнению с основным, родительским текстом.

Font-style

Это свойство еще легче. Оно отвечает за стиль шрифта, и указывает каким ему быть — прямым normal, наклонным oblique или курсивным italic. Если вы думаете, что наклонный и курсивный — это одно и то же, то глубоко заблуждаетесь! Курсив имитирует письмо, написанное «от руки», а наклонный… это просто слегка завалившийся вправо текст.

Font-weight

Это свойство определяет толщину шрифта, или правильней, насыщенность начертания. Тут можно и поэкспериментировать. Можно написать просто:

Листинг 14.

<HTML>
  <HEAD>
    <TITLE>Полужирный шрифт</TITLE>
    <STYLE TYPE=»text/css»>
      P{font-weight:bold}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И у нас получится толстенькая такая надпись:

«ДИКАЯ ПРАВДА» на www. dikarka.ru

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

<b>»ДИКАЯ ПРАВДА» на www.dikarka.ru</b>

И результат был бы такой же, разве что код раз в пять короче… И, знаете, я с вами соглашусь. Но не совсем. Потому как кроме bold можно написать и bolder (толще) и lighter (тоньше) и это не предел!!! Можно указать насыщенность не только словами, но и числами от 100 до 900!. Правда не все числа можно использовать, а только кратные 100. А число 400 равно bold. Так что в вышеприведенном примере я могла запросто написать:

P {font-weight:400}

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

Font-variant

И, последнее, чем я хочу вас помучить в неравной борьбе со шрифтами — это вообще глупость какая-то. Потому как этому свойству можно подобрать только два варианта. Причем один из них — нормальный, а второй — ненормальный. Ненормальный — это small-caps. Это когда маленькие буквы пишутся как заглавные, но оставаясь при этом маленькими. То есть маленькими прописными. Вот и примерчик:

Листинг 15.

<HTML>
  <HEAD>
    <TITLE>Хоть и маленькие, но прописные!!!</TITLE>
    <STYLE TYPE=»text/css»>
      P{font-variant:small-caps}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      «ДИКАЯ ПРАВДА» на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И вот он — результат! Все буквы стали заглавными, любуйтесь

«ДИКАЯ ПРАВДА» на www.dikarka.ru

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

В конце концов, решила не запудривать вам мозги и написать все коротко. На сколько это удалось, судить вам. Ну, а на последок, все-таки дам вам несколько советов. Хотя, не столько советов, сколько раздумий. Прислушиваться к ним или нет — ваше дело. В конце концов — решающее слово за вами. Итак…

Дикие советы

  • Жестких правил, диктующих, какой и когда выбрать шрифт — не существует. Это зависит от вашего опыта и мастерства. Хиппи выбрал бы один шрифт, учитель русского языка — другой, предприниматель — третий, а человек, влюбленный в историю — четвертый. Однако, если вы хотите, чтобы ваш текст читался с вниманием, необходимо, чтобы он легко читался, гармонировал с остальными элементами сайта, ну и был уместен вообще. :))
  • Шрифты с засечками читаются легче. Взгляд как бы скользит от одной буквы к другой.
  • Буквы без засечек лучше читаются в крупных заголовках, а также в очень мелком тексте.
  • Легче читается текст прямой, светлый, средней плотности. Хуже — курсивный или наклонный, жирный или очень светлый.
  • Для выделения пользуются наклонным или курсивным шрифтами.
  • Если ваш сайт — для детей, то лучше использовать покрупнее и пожирнее текст. То же относится и для слабовидящих. Так что учитывайте и свою аудиторию.
  • Для чтения лучше подходят шрифты от 9 до 12 кегля.
  • Лучше ограничить число шрифтов до одного. Для удобочитаемости это превыше всего. Хотя, как сказал типограф Э. Гилл «практически удобочитаемо все, к чему привыкли».
  • На удобочитаемость влияет и ширина строки, это примерно 50-70 знаков.
  • Также важны расстояние между словами, между строчками и между абзацами, но об этом мы поговорим в следующем уроке.
  • Важно также и цвет шрифта, а также фон, на котором он написан. Хотя стоит иметь в виду также и насыщенность цветов. Так что лучше всего экспериментировать и экспериментировать. .. пока не найдете «то самое», после чего все ахнут и скажут… «ну какой же красивый шрифт!»
  • Так что, выбирая шрифт, вы не должны не только учитывать его «красивость», но и принять во внимание и аудиторию и то, о чем рассказываете, и многое-многое другое… Удачи вам!



Стиль шрифта CSS • Текст курсив/курсив

стиль шрифта: курсив vs HTML em

Anstelle der CSS-Eigenschaft font-style: italic или oblique kann HTML, em oder i den Text, как курсивный шрифт. Dabei ändert der Wert italic nur den visuellen Charakter, HTML em verleiht dem Text eine inhaltliche Betonung.

курсив против наклонного

CSS bietet zwei Опции: курсив и наклон . Dabei soll italic schräg gestellte Schrift nutzen, für die der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt hat. Wenn kein italic-Schnitt vorhanden ist, soll der Browser die Schrift programmatisch schräg stellen – наклонный.

Einen Unterschied wird man gar nicht so einfach zu Gesicht bekommen: Wenn ein Italic-Font existsiert, wird der Browser den Schnitt sowohl für italic als auch für oblique benutzen. Wir müssten также eine Schriftsuchen, für die wir keinen Italic-Font haben und dann den Maschinell kursiv gesetzten Text mit dem echten kursiven Schnitt vergleichen.

Википедия Наклонный шрифт zeigt ein Beispiel für den Unterschied zwischen Italic und Oblique.

p {стиль шрифта: обычный; }
p {стиль шрифта: курсив; }
p {стиль шрифта: наклонный; }
Одер
Обычный
Курсив
Наклонный

Getestet wird ein kursiv gestellter Text Internalhalb Eines HTML-p-Elements andhand von Einigen Wörtern: Dann zeigt sich, ob sich die schräggestellten Begriffe gut vom Fließtext abheben ohne zu start hervorzureten. Ganze Absätze in kursiver / schräg gestellter Schrift gelten loopgen als »Lesebremse

стиль шрифта и @font-face

Bei Schriften, die mit @ font-face als ladbare Schrift eingebunden sind, müssen spezielle italic- und bold-Schnitte ebenfalls geladen werden, damit der Browser kursiven Text nicht digital schrägstellt und den Fettschnitt nicht selbst bastelt.

/* арсенал-обычный - латиница */
@шрифт-лицо {
  семейство шрифтов: «Арсенал»;
  стиль шрифта: обычный;
  вес шрифта: 400;
  src: local('Арсенал-Обычный'), local('Арсенал-Обычный'),
       url('fonts/arsenal/arsenal-v2-latin-regular.woff2') format('woff2'), /* Суперсовременные браузеры */
       url('fonts/arsenal/arsenal-v2-latin-regular.woff') format('woff'), /* Современные браузеры */
}
/* арсенал-курсив - латиница */
@шрифт-лицо {
  семейство шрифтов: «Арсенал»;
  стиль шрифта: курсив;
  вес шрифта: 400;
  src: local('Arsenal Italic'), local('Arsenal-Italic'),
       url('fonts/arsenal/arsenal-v2-latin-italic.woff2') format('woff2'), /* Суперсовременные браузеры */
       url('fonts/arsenal/arsenal-v2-latin-italic.woff') format('woff'), /* Современные браузеры */
}
Erster Text: Orignal Italic-Schnitt
Zweiter Text: Kein Italic-Schnitt geladen, schrägstellt vom Browser

Den Unterschied zwischen dem originalen Italic-Schnitt und dem schräggestellten Text erkennt man z. B. schnell am a und am e.

Верте для стиля шрифта

обычный
ist die Voreinstellung und stellt die Zeichen aufrecht dar. Die Angabe normal stellt sicher, dass vorangegangene Deklarationen den Schriftstil nicht beeinflussen.
курсив
stellt die Schrift in einem kursiven Schnitt dar. Wenn kein Kursivschnitt (курсив) auf dem Zielrechner installiert ist, benutzt der Browser наклонный .
косой
veranlasst den Browser, die Buchstaben schräg darzustellen, um einen Kursivschnitt nachzuahmen.

стиль шрифта umfasst nur нормальный , курсив bzw. косой . Daneben gibt weitere CSS-Eigenschaften für Schriftstile wie text-transform (Umwandlung in Großbuchstaben oder Versalien), вариант шрифта для Kapitälchen (erster Buchstabe eines Worts in kleinen Großbuchstaben).

Экстерн Квеллен

  • Was versteht man unter Schriftschnitt auf typolexikon. de
  • Адрес: Kursiv auf typolexikon.de

Типография | Windi CSS

Font Family

Утилиты для управления семейством шрифтов элемента.

без

с засечками

моно

Настройка
 экспорт по умолчанию {
  тема: {
    продлевать: {
      семейство шрифтов: {
        без засечек: ['ui-sans-serif', 'system-ui'],
        с засечками: ['ui-serif', 'Грузия'],
        моно: ['ui-monospace', 'SFMono-Regular'],
        отображать: ['Освальд'],
        тело: ['Открытый Санс'],
      },
    },
  },
}

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

 {
  // Формат массива:
  "sans": ["Helvetica", "Arial", "без засечек"],
  // Формат с разделителями-запятыми:
  "sans": "Helvetica, Arial, без засечек",
}

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

 {
  // Не будет работать:
  "sans": ["Экзо 2", /* ... */],
  // Добавляем кавычки:
  "sans": ["\"Экзо 2\"", /* ... */],
}

Размер шрифта

Утилиты для управления размером шрифта элемента.

XS

SM

BASE

LG

XL

2XL

3XL

4XL

5XL

6XL

9004 70013

9001. тема: { размер шрифта: { ‘xs’: ‘.75rem’, ‘см’: ‘.875рем’, «крошечный»: «0,875 рем», «база»: «1рем», «lg»: «1,125 бэр», «xl»: «1,25 бэр», «2xl»: «1,5 бэр», «3xl»: «1,875 бэр», «4xl»: «2,25 бэр», «5xl»: «3rem», «6xl»: «4rem», «7xl»: «5rem», }, }, }

Вы можете указать высоту строки по умолчанию для каждого размера шрифта, используя кортеж формы [fontSize, lineHeight] в файле windi. config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      см: ['14px', '20px'],
      база: ['16px', '24px'],
      LG: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это с помощью кортежа формы [fontSize, {letterSpacing, lineHeight}] в вашем файле windi.config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Или также с высотой строки по умолчанию
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        высота строки: '40px',
      }],
    },
  },
}

Сглаживание шрифта

Утилиты для управления сглаживанием шрифта элемента.

сглаживание

субпиксельное сглаживание

Стиль шрифта

Утилиты для управления стилем текста.

курсив

не курсив

Толщина шрифта

Утилиты для управления жирностью шрифта элемента.

Thin

Extralight

Light

Нормальный

Средняя

Semibold

BOLD

Extrabold

Black

4009

60013

400

60013

400

60013.0004 windi.config.js

 экспорт по умолчанию {
  тема: {
    Вес шрифта: {
      «линия роста волос»: 100,
      «сверхлегкий»: 100,
      «тонкий»: 200,
      «светлый»: 300,
      «нормальный»: 400,
      «средний»: 500,
      «полужирный»: 600,
      «жирный»: 700,
      «сверхжирный»: 800,
      «очень жирный»: 800,
      «черный»: 900,
    },
  },
}

Font Variant Numeric

Утилиты для управления вариантом чисел.

обычные-числа

порядковые

дробные-ноль

Linting Nums

OldStyle-Nums

Пропорциональные Nums

Tabular-Nums

Диагональные фракции

Сложные фракции

Гифены

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

нет

ручной

авто

Интервал между буквами

Утилиты для управления отслеживанием (межбуквенным интервалом) элемента.

БОЛЬШЕГО

TEAR

Нормальный

WID

Более

Широкий

0PX

2PX

0,5 EME

Установка

Windi тема: { Межбуквенное расстояние: { самый плотный: ‘-.075em’, плотнее: ‘-.05em’, плотно: ‘-.025em’, нормальный: «0», широкий: ‘0,025em’, шире: «.05em», самый широкий: ‘.25em’, }, }, }

Высота строки

Утилиты для управления интерлиньяжем (высотой строки) элемента.

Нет

TEAR

SNUG

Нормальный

Расслаблен

Свободный

1

2

3

4

5

Customize

40013 9001. com 9000. тема: { продлевать: { высота линии: { «экстра-рыхлый»: «2,5», }, }, }, }

Выступ, размер

Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009).

по умолчанию

2

4

8

7.5px

2rem

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер вкладки: {
      см: '2',
      мд: '4',
      лг: '8',
    },
  },
}

Выравнивание текста

Утилиты для управления выравниванием текста.

слева

посередине

справа

justify

Text Color

Утилиты для управления цветом текста элемента.

Прозрачный

Ток

Грей-500

RED-500

Желтый-500

Blue-500

Green-500

GREY-500/50

RED-500/500013

GREY-500/50

RED-500/500013

GREY-500/50

RED-500/500013

Yellow-500/50

4. /50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    цвет текста: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Оформление текста

Утилиты для управления оформлением текста.

Тип оформления текста

Утилиты для управления типом оформления текста.

подчеркнутый

надчеркнутый

сквозной

без подчеркивания

Цвет оформления текста

Утилиты для управления цветом оформления текста.

прозрачный

Ток

Grey-500

RED-500

ЖЕЛТЫ-500

Blue-500

Green-500

Grey-500/50

RED-500/50

Yellow-500/500013

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textDecorationColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Стиль оформления текста

Утилиты для управления стилем оформления текста.

сплошной

двойной

пунктирный

пунктирный

волнистый

Толщина оформления текста

Утилиты для управления толщиной оформления текста.

Auto

от Font

1

2

3

4

5

6

7

8

0.1REM

3PLEAN

. js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationLength: {
        см: '1px',
        мд: '2px',
        LG: '4px',
      },
    },
  },
}

Смещение оформления текста

Утилиты для управления смещением оформления текста.

Auto

1

2

3

4

5

6

7

8

0,6REM

8.5px

9004.13.

. По умолчанию { тема: { textDecorationOffset: { см: ‘1px’, мд: ‘2px’, LG: ‘4px’, }, }, }

Непрозрачность оформления текста

Утилиты для управления непрозрачностью цвета оформления элемента. Это запасной вариант цвета оформления текста, начиная с WindiCSS v3.4.0.

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Customizing

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationOpacity: {
        10: «0,1»,
        20: «0,2»,
        95: «0,95»,
      },
    },
  },
}

Отступ текста

Утилиты для управления отступом текста.

default

xs

sm

md

lg

xl

2xl

3xl

1.8rem

2em

1/2

-xs

-1em

Customizing

windi.config .js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      отступ текста: {
        «4xl»: «5rem»,
        «5xl»: «6rem»,
      },
    },
  },
}

Непрозрачность текста

Утилиты для управления непрозрачностью цвета текста элемента.

5

10

20

25

30

40

50

60

70

75

80

90

95

100

Customizing

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      непрозрачность текста: {
        10: «0,1»,
        20: «0,2»,
        95: '0,95',
      },
    },
  },
}

Text Shadow

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

по умолчанию

sm

md

lg

xl

нет

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // Если предоставлена ​​тень ПО УМОЛЧАНИЮ, она будет использоваться для теневая утилита без суффикса.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0,25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Обводка текста

Утилиты для управления обводкой текстового элемента.

Ширина обводки текста

Утилиты для управления шириной обводки текста.

default

none

sm

md

lg

1

2

3

4

5

6

7

8

0.1rem

3px

0.3em

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textStrokeWidth: {
        'xl': '6',
        «2xl»: «8»,
      },
    },
  },
}

Цвет обводки текста

Утилиты для управления цветом обводки текста.

transparent

current

gray-500

red-500

yellow-500

blue-500

green-500

gray-500/50

red-500/50

yellow-500 /50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textStrokeColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Преобразование текста

Утилиты для управления преобразованием текста.

верхний регистр

нижний регистр

заглавные буквы

обычный регистр

Text Overflow

Утилиты для управления переполнением текста в элементе.

урезать

многоточие переполнения

зажим переполнения

Выравнивание по вертикали

Утилиты для управления выравниванием по вертикали встроенного блока или поля ячейки таблицы.

baseline

top

middle

bottom

text-top

text-bottom

пробел

Утилиты для управления свойством пробела элемента.

обычная

нововставка

предварительная обработка

предварительная обработка

предварительная обмотка

Разрыв слов

Утилиты для управления разрывами слов в элементе.

нормальный

слов

все

Режим письма

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

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

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