CSS
Типография

Синтаксис

• font: [ font-style ] [font-variant] [font-weight] font-size [/ line-height] font-family ;
• font-style: font-style
• font-variant: font-variant
• font-weight: font-weight ;
• font-size: font-size ;
• line-height: line-height ;
• font-family: font-family ;
• цвет: цвет ;
• quotes: none | string | initial | inherit ;
• font-stretch: font-stretch ;
• text-align: text-align ;
• text-indent: length | initial | inherit ;
• text-overflow: clip | ellipsis | string | initial | inherit ;
• text-transform: none | заглавные буквы | прописные буквы | строчные | начальные | наследования ;
• text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit ;
• font-size-adjust: число | none | initial | inherit;
• стретч-стрит: сверхконденсат | конденсированный | конденсированный | полуконденсированный | нормальный | полурасширенный | расширенный | экстра-расширенный | ультра-расширенный | initial | inherit;
• Дефис: нет | руководство | авто ;
• tab-size: number | length | initial | inherit ;
• расстояние между буквами: normal | length | initial | inherit ;
• word-spacing: normal | length | initial | inherit ;

параметры

замечания

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

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

Текст внутри #element-one будет размером 30px , а текст в #element-two будет размером 10 10px .

Шрифт

С синтаксисом:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Вы можете иметь все стили, связанные с font в одном объявлении с сокращением font . Просто используйте свойство font и поместите свои значения в правильном порядке.

Например, чтобы все элементы p выделены жирным шрифтом с размером шрифта 20px и с использованием Arial в качестве семейства шрифтов, вы обычно его кодировали следующим образом:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Однако с сокращением шрифта он может быть сжат следующим образом:

p {
    font: bold 20px Arial, sans-serif;
}

Обратите внимание : поскольку font-style , font-variant , font-weight и line-height являются необязательными, три из них пропущены в этом примере. Важно отметить, что использование ярлыка сбрасывает другие атрибуты, не указанные. Другим важным моментом является то, что двумя необходимыми атрибутами для ярлыка шрифта для работы являются font-size font-family . Если они не включены, ярлык игнорируется.

Начальное значение для каждого из свойств:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - зависит от пользователя

Шрифты

font-family: 'Segoe UI', Tahoma, sans-serif;

Браузер попытается применить шрифт «Segoe UI» к символам в элементах, на которые ссылается вышеуказанное свойство. Если этот шрифт недоступен или шрифт не содержит глифа для требуемого символа, браузер возвращается к Tahoma и, при необходимости, шрифту sans-serif на компьютере пользователя. Обратите внимание, что любые имена шрифтов с более чем одним словом, такие как «Segoe UI», должны иметь одинарные или двойные кавычки вокруг них.

font-family: Consolas, 'Courier New', monospace;

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

Межбуквенное расстояние

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

Свойство letter-spacing используется для указания пробела между символами в тексте.

! Расстояние между буквами также поддерживает отрицательные значения:

p {
  letter-spacing: -1px;
}

Ресурсы: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

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

Свойство text-transform позволяет вам изменять капитализацию текста. Допустимыми значениями являются: uppercase , uppercase capitalize , lowercase , initial , inherit и none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

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

p {
    text-indent: 50px;
}

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

Ресурсы:

• Отступы только в первой строке текста в абзаце?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Текстовое оформление

Свойство text-decoration используется для установки или удаления украшений из текста.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration можно использовать в сочетании с текстом-украшением-стилем и текстом-украшением-цветом как сокращенное свойство:

.title { text-decoration: underline dotted blue; }

Это сокращенная версия

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Следует отметить, что следующие свойства поддерживаются только в Firefox

• текст-отделка цвета
• текст-отделка линия
• текст-отделка-стиль
• текст-отделка-скип

Переполнение текста

Свойство text-overflow имеет дело с тем, как переполненный контент должен сигнализироваться пользователям. В этом примере ellipsis представляет сжатый текст.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Пример (открыть в Chrome или Safari):

http://jsfiddle.net/csYjC/1131/

Ресурсы:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Межстрочный интервал

Свойство word-spacing определяет поведение интервалов между тегами и словами.

Возможные значения

• положительная или отрицательная длина (с использованием em px vh cm и т. д.) или процент (с использованием % )
• ключевое слово normal использует интервал слова шрифта по умолчанию
• ключевое слово inherit принимает значение из родительского элемента

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Интернет-Demo

Попробуй сам

Дальнейшее чтение:

• слово-интервал - MDN
• word-spacing - w3.org

Направление текста

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

Свойство direction используется для изменения горизонтального направления текста элемента.

Синтаксис: direction: ltr | rtl | initial | inherit;

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

Синтаксис: direction: horizontal-tb | vertical-rl | vertical-lr;

Вариант шрифта

Атрибуты:

нормальный

Атрибут по умолчанию для шрифтов.

капитель

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

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

Ouput:

Примечание. Свойство font-variant является сокращением для свойств: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures и font-variant-east-asian.

Цитаты

Свойство quotes используется для настройки кавычек открытия и закрытия тега <q> .

q {
    quotes: "«" "»";
}

Текстовая тень

Чтобы добавить тени в текст, используйте свойство text-shadow . Синтаксис выглядит следующим образом:

text-shadow: horizontal-offset vertical-offset blur color;

Тень без радиуса размытия

h1 {
  text-shadow: 2px 2px #0000FF;
}

Это создает эффект синей тени вокруг заголовка

Тень с радиусом размытия

Чтобы добавить эффект размытия, добавьте параметр blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Несколько теней

Чтобы выделить элемент несколько теней, разделите их запятыми

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}