Главная » Языки программирования

Шрифт

Содержание
  1. Свойства текста
  2. Свойства шрифта
  3. Свойства текста
  4. Форматирование текста (font-weight, font-style, font-size, text-indent) в HTML
  5. Курсив (font-style)
  6. Размер шрифта (font-size)
  7. Красная строка (text-indent)
  8. Свойство CSS font
  9. Как изменить стиль и оформление текста в html
  10. Пример 1. Шрифт 15px, Ariel, Italic
  11. Пример 2. Шрифт 16px, Calibri, жирный (bold)
  12. Пример 3. Font: caption
  13. CSS font-weight Property
  14. Browser Support
  15. CSS Syntax
  16. Property Values
  17. Related Pages
  18. COLOR PICKER
  19. Report Error
  20. Thank You For Helping Us!
  21. Как установить стиль шрифта. CSS-свойство font
  22. Значения и примеры использования
  23. Font-family
  24. Font-style
  25. Font-variant
  26. Font-weight
  27. Font-size
  28. Line-height
  29. Наследование
  30. Нюансы
  31. Чем заменить свойство font
  32. Материалы по теме

Свойства текста

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег , задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

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

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами

Свойство Значение Описание Пример
font-family имя шрифта Задает список шрифтов P
font-style normal
italic
oblique		 Нормальный шрифт
Курсив
Наклонный шрифт		 P
font-variant normal
small-caps		 Капитель (особые прописные буквы) P
font-weight normal
lighter
bold
bolder
100–900		 Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный		 P
font-size normal
pt
px
%		 нормальный размер
пункты
пикселы
проценты		 font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

       
Заголовок
 
Обычный текст

Ниже приведен результат данного примера (рис. 1).

Вид текста после применения стилей

Рис. 1. Вид текста после применения стилей

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

Табл. 2. Результат использования различных параметров шрифтов

Пример Пример Пример Пример Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light font-size: large; font-weight: bold font-family: Arial, sans-serif; font-size: x-small; font-weight: bold font-variant: small-caps font-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста

Свойство Значение Описание Пример
line-height normal
множитель
значение
%		 Интерлиньяж (межстрочный интервал) line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decoration none
underline
overline
line-through
blink		 Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста		 text-decoration: none
text-transform none
capitalize
uppercase
lowercase		 Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные		 text-transform: capitalize
text-align left
right
center
justify		 Выравнивание текста text-align: justify
text-indent значение
%		 Отступ первой строки text-indent: 15px;
text-indent: 10%

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

Табл. 4. Результат использования различных параметров текста

Пример: и это все о нем Пример: текст по центру Пример: Это не ссылка, а просто текст Пример: отступ первой строки Пример: полуторный межстрочный интервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5

Источник

Форматирование текста (font-weight, font-style, font-size, text-indent) в HTML

Помимо эти названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра — тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.

Далеко не у всех шрифтов есть весь набор градаций жирного. Обычно используются только два: bold и normal варианты. Поэтому в таких ситуациях какую цифру ни ставь, все равно получишь только 2 варианта жирности. Но через CSS можно подключить шрифты (указать адреса файлов), в которых будет все остальные градации жирности.

Курсив (font-style)

Курсив можно получить с помощью тега . Но ещё и через свойство font-style со значением italic. Приведём пример:

Размер шрифта (font-size)

  • px — пикселы,
  • % — проценты (от размера шрифта родительского элемента)
  • em — высота шрифта элемента (единица — это сто процентов от размера шрифта родительского элемента),
  • pt — пункты (по сути пиксели, но в пропорции 12pt = 16px)
  • текстовые названия размеров: xx-small, x-small, smal, medium, large, x-large, xx-large
  • ex — высота символа х (единица — это сто процентов),
Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. 
Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше.

Красная строка (text-indent)

Наверное, вы уже заметили, что HTML не воспринимает пробелы. То есть если в HTML коде поставить сотню пробелов между словами, а потом открыть этот HTML файл в браузере, то пробелы заменятся на один. Из-за этого и нет возможности сделать красную строку в абзаце. Но на помощь приходит CSS свойство text-indent, которое может сделать этот отступ. Значение этого свойства задаются в пикселях. Приведём пример:

 
Тише, мыши, кот на крыше, 
а котята ещё выше.

Источник

Свойство CSS font

Свойство CSS font отвечает за внешний вид текста (форматирование): размер шрифта, стиль шрифта, расстояние между строками, толщина линий.

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit;
  • font-style — стиль шрифта:
    • normal — обычное начертание (по умолчанию)
    • italic — курсивный текст
    • oblique — наклонное текст (немного меньше, чем курсив)
    • inherit — применяется значение родительского элемента
    • normal — обычное начертание (по умолчанию)
    • small-caps — весь текст выводится в виде маленьких прописных букв
    • inherit — применяется значение родительского элемента
    • normal — обычный размер шрифта (400)
    • bold — жирный размер (700)
    • bolder — увеличивает степень жирности
    • lighter — уменьшает степень жирности

    Более подробно читайте в статье: свойство font-weight. Также ознакомьтесь: какой выбрать шрифт для сайта »

    • Ariel
    • Verdana
    • Times New Roman
    • Calibri
    • Georgia
    • Impact

    Помимо этих значений font может принимать значения «константы»:

    Свойства font-style , font-variant , font-weight , font-size , line-height , font-family можно использовать отдельно (независимо) друг от друга.

    Как изменить стиль и оформление текста в html

    Пример 1. Шрифт 15px, Ariel, Italic

    html> head> style> .primer1< font: italic 15px/30px Arial; > /style> /head> body> div class css">primer1">Пример №1. Текст со свойством italic 15px/30px Arial. Расстояние между строками 30 пикселей/div> /body> /html>

    На странице преобразуется в следующее

    Пример 2. Шрифт 16px, Calibri, жирный (bold)

    html> head> style> .primer2< font-size: 16px; font-family: Calibri; font-weight: bold; font-style: oblique; > /style> /head> body> div class css">primer2">Пример №2. Текст со свойством font-size: 16px;font-family: Calibri;font-weight: bold;font-style: oblique; /div> /body> /html>

    На странице преобразуется в следующее

    Пример №2. Текст со свойством font-size: 16px; font-family: Calibri; font-weight: bold; font-style: oblique;

    Пример 3. Font: caption

    Пример: готовый шрифт для текста элементов форм «font: caption»

    html> head> style> .primer3< font: caption; > /style> /head> body> div class css">primer3">Пример №3. Текст со свойством font: caption;/div> /body> /html>

    На странице преобразуется в следующее

    Для обращения к font из JavaScript нужно писать следующую конструкцию:

    [window.]document.getElementById("elementID").style.font value">VALUE"

    Источник

    CSS font-weight Property

    The font-weight property sets how thick or thin characters in text should be displayed.

    Default value: normal
    Inherited: yes
    Animatable: yes. Read about animatable Try it
    Version: CSS1
    JavaScript syntax: object.style.fontWeight=»bold» Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    CSS Syntax

    Property Values

    Value Description Demo
    normal Defines normal characters. This is default Demo ❯
    bold Defines thick characters Demo ❯
    bolder Defines thicker characters Demo ❯
    lighter Defines lighter characters Demo ❯
    100
    200
    300
    400
    500
    600
    700
    800
    900    		 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold Demo ❯
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    Unlock Full Access 50% off

    COLOR PICKER

    colorpicker

    Join our Bootcamp!

    Report Error

    If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

    Thank You For Helping Us!

    Your message has been sent to W3Schools.

    Top Tutorials
    Top References
    Top Examples
    Get Certified

    W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

    Источник

    Как установить стиль шрифта. CSS-свойство font

    Свойство font используется для оформления текста на сайте. Оно позволяет задавать различные атрибуты шрифта: размер, начертание, жирность, стиль и цвет.

    Свойство в общем виде записывается так:

    font-family — устанавливает семейство шрифтов.

    font-style — задаёт стиль шрифта.

    font-variant — определяет вариант шрифта.

    font-weight — задаёт жирность шрифта.

    font-size — указывает размер шрифта.

    line-height — задаёт высоту строки.

    Значения и примеры использования

    Font-family

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

    Font-style

    Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .

    Font-variant

    У свойства font-variant несколько значений:

    small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

    Font-weight

    Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal , полужирный bold .

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

    • 100: Thin;
    • 200: Extra Light (Ultra Light);
    • 300: Light;
    • 400: Normal;
    • 500: Medium;
    • 600: Semi Bold (Demi Bold);
    • 700: Bold;
    • 800: Extra Bold (Ultra Bold);
    • 900: Black (Heavy).

    Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

    Font-size

    Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).

    Абсолютную величину шрифта можно задавать не только в пикселях, пунктах или других величинах, но и особыми ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . Подробно об этих ключевых словах можно узнать в спецификации.

    Line-height

    Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

    Наследование

    Свойство font наследуется от родительского элемента на его дочерние элементы.

    Нюансы

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

    Для второго абзаца заданы сначала общие параметры, а затем переопределены в селекторе по классу

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

    Шрифт PT Sans Regular недоступен, поэтому заголовок оформлен шрифтом Arial

    ⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

    Чем заменить свойство font

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

    Материалы по теме

    «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

    Источник

    Читайте также:  Python байты и массивы байтов
Оцените статью
© 2024 Программирование