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

Html font family font caps

Содержание
  1. font¶
  2. Демо¶
  3. Синтаксис¶
  4. Значения¶
  5. Спецификации¶
  6. Описание и примеры¶
  7. Как установить стиль шрифта. CSS-свойство font
  8. Значения и примеры использования
  9. Font-family
  10. Font-style
  11. Font-variant
  12. Font-weight
  13. Font-size
  14. Line-height
  15. Наследование
  16. Нюансы
  17. Чем заменить свойство font
  18. Материалы по теме
  19. font-variant-caps
  20. Try it
  21. Language-specific rules
  22. Syntax
  23. Values
  24. Accessibility concerns
  25. Formal definition
  26. Formal syntax
  27. Examples
  28. Setting the small-caps font variant
  29. HTML
  30. CSS
  31. Result
  32. Specifications
  33. Browser compatibility
  34. See also
  35. Found a content problem with this page?
  36. MDN
  37. Support
  38. Our communities
  39. Developers

font¶

Свойство font универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Демо¶

  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings
  • font-weight
  • line-height

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
/* size | family */ font: 2em 'Open Sans', sans-serif; /* style | size | family */ font: italic 2em 'Open Sans', sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; /* style | variant | weight | stretch | size/line-height | family */ font: italic small-caps bolder condensed 16px/3 cursive; /* The font used in system dialogs */ font: message-box; font: icon; /* Global values */ font: inherit; font: initial; font: unset;

Значения¶

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

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

caption Шрифт для текста элементов форм вроде кнопок. icon Шрифт для текста под иконками. menu Шрифт применяемый в меню. message-box Шрифт для диалоговых окон. small-caption Шрифт для подписей к небольшим элементам управления. status-bar Шрифт для строки состояния окон.

Читайте также:  Setting environment variables from java

Значение по-умолчанию: зависит от использования

Применяется ко всем элементам

Спецификации¶

Описание и примеры¶

p  font: 12pt/10pt sans-serif; >

Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт ( sans-serif ).

p  font: bold italic 110% serif; >

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками ( serif ).

p  font: normal small-caps 12px/14px fantasy; >

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight .

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
 html> head> meta charset="utf-8" /> title>fonttitle> style> .layer1  font: 12pt sans-serif; > h1  font: 2em serif; > style> head> body> div class="layer1"> h1>Экзистенциальный либерализмh1> p> Карл Маркс исходил из того, что типология средств массовой коммуникации неизбежна. p> div> body> html>

Источник

Как установить стиль шрифта. 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 .

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

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

Источник

font-variant-caps

The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.

Try it

When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.

Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.

Language-specific rules

This property accounts for language-specific case mapping rules. For example:

  • In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i (one with the dot, one without) and two case pairings: i / İ and ı / I .
  • In German (de), the ß may become ẞ (U+1E9E) in uppercase.
  • In Greek (el), vowels lose their accent when the whole word is in uppercase ( ά / Α ), except for the disjunctive eta ( ή / Ή ). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel ( άι / ΑΪ ).

Syntax

/* Keyword values */ font-variant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; font-variant-caps: petite-caps; font-variant-caps: all-petite-caps; font-variant-caps: unicase; font-variant-caps: titling-caps; /* Global values */ font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: revert; font-variant-caps: revert-layer; font-variant-caps: unset;

The font-variant-caps property is specified using a single keyword value from the list below. In each case, if the font doesn’t support the OpenType value, then it synthesizes the glyphs.

Values

Deactivates of the use of alternate glyphs.

Enables display of small capitals (OpenType feature: smcp ). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc , smcp ).

Enables display of petite capitals (OpenType feature: pcap ).

Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc , pcap ).

Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic ).

Enables display of titling capitals (OpenType feature: titl ). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

Accessibility concerns

Large sections of text set with a font-variant value of all-small-caps or all-petite-caps may be difficult for people with cognitive concerns such as Dyslexia to read.

Formal definition

Formal syntax

font-variant-caps =
normal |
small-caps |
all-small-caps |
petite-caps |
all-petite-caps |
unicase |
titling-caps

Examples

Setting the small-caps font variant

HTML

p class="small-caps">Firefox rocks, small caps!p> p class="normal">Firefox rocks, normal caps!p>

CSS

.small-caps  font-variant-caps: small-caps; font-style: italic; > .normal  font-variant-caps: normal; font-style: italic; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью
© 2024 Программирование