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

font-style[править]

Стиль шрифта

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

  1. normal — обычный (значение по умолчанию)
  2. italic — курсив
  3. 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

font-size[править]

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

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

  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[править]

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать 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)

Текст[править]

text-align[править]

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

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

  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 — текст обрезается с добавлением многоточия