CSS/Шрифты и текст

< CSS

Шрифт и текст в CSS имеют следующие свойства.

Шрифты

править

font-family

править

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

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

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

Пример:

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

Существуют 5 семейств шрифтов:

  1. serif — шрифты с засечками
  2. sans-serif — шрифты без засечек
  3. monospace — моноширинные
  4. cursive — курсивные
  5. fantasy — декоративные

Пример, как выглядят такие шрифты:

serif sans-serif monospace cursive fantasy

Стиль шрифта

Существуют три значения этого свойства:

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

Браузеры последний стиль обычно отображают как курсивный

font-variant

править

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

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

font-weight

править

Вес шрифта

Это свойство устанавливает вес (насыщенность) шрифта.

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

  1. 100
  2. 200
  3. 300
  4. 400 или normal
  5. (значение по умолчанию)
  6. 500
  7. 600
  8. 700 или bold
  9. 800
  10. 900

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

Возможные значения этого свойства:

  1. абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
  2. относительные константы: smaller, larger
  3. абсолютные и относительные единицы измерения CSS

line-height

править

Межстрочный интервал, часто применяется вместе с font-size

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

  1. normal — нормальное значение (по умолчанию)
  2. number — число (больше либо равно 0), на которое умножается текущий размер шрифта
  3. length — фиксированное значение в единицах измерения CSS
  4. % — проценты от текущего размера шрифта

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

Пример:

p {
  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif;
}

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифты

править

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face

Шрифты бывают следующих типов:

  1. eot — embedded opentype (.eot)
  2. ttf — truetype (.ttf)
  3. otf — opentype (.ttf, .otf)
  4. svg — svg-шрифты (.svg, .svgz)
  5. woff — web open font format (.woff)

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

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

  1. left — по левому краю (значение по умолчанию)
  2. right — по правому краю
  3. center — по центру
  4. justify — по ширине

letter-spacing/word-spacing

править

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

  1. normal — нормальное значение (по умолчанию)
  2. length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decoration

править

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

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

  1. underline — подчёркнутый текст
  2. overline — линия над текстом
  3. line-through — перечёркнутый текст
  4. blink — мигающий текст
  5. none — отмена всех эффектов (значение по умолчанию)

text-indent

править

Отступ первой строки

  1. length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
  2. % — проценты от ширины строки

text-transform

править

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

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

  1. none — нет трансформации (значение по умолчанию)
  2. uppercase — преобразование всех строчных символов в заглавные
  3. lowercase — преобразование всех заглавных символов в строчные
  4. capitalize — преобразование первой буквы каждого слова в заглавную

vertical-align

править

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

Применяется только к строчным элементам и к ячейкам таблицы

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

  1. baseline — по базовой линии (значение по умолчанию)
  2. sub — нижний индекс
  3. super — верхний индекс
  4. top — верх элемента выравнивается с самым высоким элементом строки
  5. text-top — верх элемента выравнивается с верхом шрифта родительского элемента
  6. middle — по середине
  7. bottom — по нижней части
  8. text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
  9. проценты
  10. величины CSS

Для ячеек таблицы:

  1. baseline — содержимое ячейки по базовой линии (значение по умолчанию)
  2. top — по верхнему краю
  3. bottom — по нижнему краю
  4. middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-space

править

Пробелы между словами

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

  1. normal — обычное поведение (значение по умолчанию)
  2. pre — пробелы и переносы учитываются
  3. nowrap — пробелы и переносы не учитываются
  4. pre-wrap — пробелы учитываются, текст переносится
  5. pre-line — пробелы не учитываются, текст переносится

text-shadow

править

Добавление тени к тексту (CSS3)

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

  1. h-shadow — смещение тени по горизонтали
  2. v-shadow — смещение тени по вертикали
  3. blur — радиус размытия тени
  4. color — цвет тени
  5. none — нет тени (значение по умолчанию)

text-overflow

править

Видимость текста, если он не влезает в ширину блока (CSS3)

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

  1. clip — текст обрезается по размеру блока (значение по умолчанию)
  2. ellipsis — текст обрезается с добавлением многоточия