font-variant в CSS


font-variant

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.ШТМЛ#propdef-font-variant

Описание

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

Синтаксис

font-variant: normal | small-caps

Аргументы

Рис. 1. Обычный контент и контент в виде капители

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 2.

CSS font-variant

Свойство CSS font-variant указывает способ представления строчных букв. Можно оставить их без изменений, а можно сделать их прописными уменьшенного размера (капитель). Я, честно говоря, смутно представляю, где может пригодиться такое странное свойство, но для чего-то оно есть.

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

normal — оставлять строчные буквы без изменения.

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

Значение по умолчанию: normal

CSS font-variant Свойство

Пример

Задайте для абзаца шрифт с малыми прописными буквами:

Определение и использование

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

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

Значение по умолчанию: normal
Inherited: yes
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.fontVariant=»small-caps»

Поддержка браузера

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

Типографика и современный CSS

Пока некоторые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие совсем мало освещаются в интернете. Взять хотя бы свойства, отвечающие за типографику. Они весьма полезны и эффектны, но широко не известны. Давайте же исправим несправедливость и осветим то, что обычно остается в тени.

Правильные переносы слов (hyphens)

С переносом строк в CSS всегда что-то было не так. Вначале у нас было свойство word-wrap, которое вроде бы работает, но числится как черновое и не рекомендуется к использованию. Затем появилось word-break, которое расставляет переносы отталкиваясь исключительно от того, помещаются ли слова в контейнер, да еще не помечает их никакими знаками. Лишь теперь, спустя столько лет, CSS-переносы готовы встать с колен: наконец-то мы можем переносить слова по правилам языка с помощью свойства hyphens:

  • manual — Слова переносятся только в тех местах текста, где добавлен спецсимвол ­ или тег . Используется по умолчанию;
  • auto — браузер добавляет переносы автоматически на основе встроенного словаря;
  • none — слова не переносятся.

Важный нюанс: чтобы словарь переносов заработал, в теге необходимо указать атрибут lang с кодом языка:

Также этот атрибут можно задать непосредственно в абзаце текста:

Работает это везде, кроме настольных Chrome и Opera, в них все будет выглядеть как обычно. Но в остальных браузерах мы получим нормальные переносы, так что можете смело пользоваться.

Капитель (font-variant: small-caps)

Капитель — это начертание в гарнитуре, при котором строчные знаки выглядят как уменьшенные заглавные. В CSS его можно задать с помощью свойства font-variant, отвечающего за представление строчных букв. Доступные значения:

  • normal — значение по умолчанию;
  • inherit — наследует значение родителя;
  • small-caps — то, что нас интересует. Отображает все строчные символы как заглавные, но уменьшенного размера.


Выглядит это весьма интересно:

Font-variant давно поддерживается во всех браузерах. Поиграться с другим текстом или шрифтом можно здесь:

Продвинутое оформление подчеркиваний (text-decoration-skip)

О свойствах text-decoration-style и text-decoration-color я уже писал. Но существует еще одно: text-decoration-skip. Оно включает пропуск выносных элементов в подчеркиваемом тексте, что выглядит довольно-таки эффектно.

Свойство может принимать несколько значений, но более-менее работают только:

  • ink — подчеркивающая линия пропускает буквы, заходящие за базовую линию;
  • objects — значение по умолчанию. Линия пропускает такие объекты, как изображения и inline-block элементы

Работает в Chrome, Opera и Safari (причем, Safari на маке по-умолчанию использует text-decoration-skip: ink).

Оформление кавычек (quotes)

А вы знали, что в CSS можно задать формат всех кавычек, использующихся на сайте? Для этого есть специальное свойство quotes. Оно применится к содержимому тега , а также к псевдоэлементам со свойством content равным open-quote или close-quote.

Свойство давно поддерживается всеми браузерами.

Тюнинг многоколоночных текстов (orphans и widows)

Свойство widows CSS определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на paged носителе. В типографике, «висячая» строка (widow) это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства widows позволяет предотвратить висячие строки.

На нестраничных носителях, таких как screen, CSS свойство widows не имеет эффекта.

Выглядит как что-то бесполезное для 99.9% разработчиков. Скажите, как часто вам приходилось им пользоваться? Если такое случалось хотя бы один раз, пожалуйста, напишите об этом в комментариях.

Но это не все, на что способны эти свойства! Почему-то мало где описано, что они работают и для многоколоночных макетов!

Сразу возникает вопрос: «А что если для блока указать оба свойства? Не начнут ли они конфликтовать?». В таких случаях widows имеет приоритет и учитывается в первую очередь.

В контексте стилизации страниц свойства давно работают везде, кроме, Firefox. Применительно к стилизации колонок они не работают в IE/Edge.

Как видите, среди малоизвестных свойств можно найти много полезного. Не за горами свойства для более тонкой настройки переносов, потока текста для разных блоков (CSS Regions), оформления врезок (CSS Exclusions) и многое другое.

Илон Маск рекомендует:  Что такое код hw_objrec2array

Если вы знаете другие типографические новинки в HTML и CSS, которые уже работают в браузерах, пожалуйста, пишите в комментариях!

Свойство CSS font-variant

Описание и использование

Когда значение свойства CSS font-variant равно small-caps, все строчные буквы заменяются на заглавные. Однако, эти буквы меньше по размеру, чем оригинальные заглавные буквы. Вот
Пример .

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

Значение по умолчанию normal
Наследование да
Версия CSS CSS 1
Синтаксис JavaScript object.style.fontVariant=»small-caps»

Поддержка в браузерах

Свойство font-variant поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

CSS Свойство font-variant

Пример

Установить шрифт параграфа в капитель:

p.small
<
font-variant:small-caps;
>

Попробуйте сами »

Определение и Использование

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

Свойство font-variant указывает, должен или нет текст отображаться в шрифте капитель.

Значение по умолчанию: normal
Наследуется: да
Версия: CSS1
JavaScript синтаксис: объект.style.fontVariant=»small-caps»

Поддержка Браузерами

Свойство font-variant поддерживается всеми основными браузерами.


Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

Про CSS

Вариативные шрифты

Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2020 года, вместе с релизом OpenType 1.8. На самом деле, работы в этом направлении велись ещё в 90-х, но только широкое использование шрифтов в вебе дало этой идее вторую жизнь и бурное развитие.

На момент написания статьи вариативные шрифты уже достаточно хорошо поддерживаются приложениями (Photoshop, Illustrator) и браузерами (Chrome, Edge, Safari, в Firefox пока за флагом и только на MacOS), а кроме того, выложено несколько свободно распространяемых демо-версий, следовательно, уже можно заняться изучением возможностей таких шрифтов и подготовиться к их использованию в реальной жизни.

Вариативные шрифты — это расширение формата OpenType, которое позволяет хранить все варианты начертаний в одном файле, а для переключения между ними использовать не только фиксированные шаги, но и промежуточные значения. Например, вместо привычных значений жирности вроде 100 , 400 , 700 можно будет задать 75 или 650 , и так же гибко можно настроить ширину символа от самого сжатого до самого широкого задав любое значение в предопределённом диапазоне, и всё это без загрузки дополнительных файлов:

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

Настройками шрифта можно управлять с помощью CSS.

Высокоуровневые и низкоуровневые CSS-свойства

Низкоуровневые — это font-variation-settings и font-feature-settings . Их значения состоят из списка пар имён и значений, перечисленных через запятую.

Высокоуровневые — это, например, font-optical-sizing , font-variant-ligatures и font-variant-numeric .

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

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

Доступные настройки шрифта можно воспринимать как API: можно управлять только теми, которые предопределил разработчик. Если какие-то настройки не предусмотрены, ими управлять нельзя. Следовательно, чтобы полноценно пользоваться шрифтом, нужно точно знать какие возможности в нём есть. Для определения свойств шрифта удобно использовать вот эти сервисы:

  • fontdrop.info — покажет все возможности шрифта и позволит поиграться с ними вживую. Не поддерживает WOFF2.
  • wakamaifondue.com — покажет возможности, живые примеры и предложит CSS. Так как он пытается показать примеры для всех настроек шрифта, на шрифтах с кучей символов и настроек страница может ощутимо тормозить. Поддерживает WOFF2.

Для экспериментов можно воспользоваться шрифтами, выложенными в открытый доступ:

font-variation-settings

Свойство позволяет управлять вариациями шрифта, задавать как отрисовывается глиф (наклон, толщина линий, ширина символа). Исключение составляет ital , при котором могут заменяться глифы.

В значении свойства через запятую перечисляются названия вариаций и значения для них. Названия вариаций в кавычках, названия кастомных вариаций пишутся капсом.

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

Значение по умолчанию: normal (шрифт выглядит как обычно, настройки не применяются).

See the Pen aKLXWW by yoksel (@yoksel) on CodePen.

Так как в курсиве глифы выглядят иначе, плавный переход от одного к другому затруднителен, поэтому здесь можно только включить или выключить свойство, задав 1 или 0 .

Также в этом демо можно увидеть как огругляются неподдерживаемые значения. Можно задать, например, «ital» 0.5 , и оно приведётся к единице, а все меньшие значения — к нулю.

По идее, slnt — это наклон, а не курсив, то есть глифы не меняются, но в некоторых шрифтах такое поведение демонстрирует ital . Для демо был выбран KairosSans, в котором ital ведёт себя как slnt .

В отличие от ital , наклон может изменяться плавно.

opsz — оптический размер.

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

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

В отличие от простой трансформации, при изменении ширины вертикальные линии сохраняют свою толщину, соотношения линий остаются прежними, и шрифт не выглядит искажённым:

Управление шириной глифа доступно во многих шрифтах.

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

Полный список предопределённых вариаций можно найти в спецификации OpenType, там же есть подробное описание каждой из них.

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

Илон Маск рекомендует:  Что такое код bcdiv

Например, у шрифта Decovar есть целых 15 настроек, из которых только одна стандартная — управление весом линий, в итоге из одного шрифта можно извлечь огромное количество вариантов:

В этом случае каждый отдельный стиль текста может задаваться набором значений:

Обратите внимание, что названия кастомных меток пишутся капсом.

А у Slovic — всего одна настройка, но она позволяет плавно переключаться между предустановленными стилями:


Значения вариаций можно анимировать.

font-feature-settings

Эта настройка позволяет включить или выключить некоторые возможности шрифта, например, лигатуры или отображение цифр в старом стиле:

  • liga — лигатуры (когда для удобочитаемости два символа отображаются как один)
  • smcp — отображение строчных как маленьких заглавных
  • frac — отображение дробей
  • onum — цифры в старом стиле
  • zero — перечеркнутый ноль

Если фичу нужно включить, достаточно её имени, например:

Хотя запись типа «smcp» on помогает лучше понять что происходит в коде.

Если же нужно выключить, обязательно добавлять off :

Некоторые фичи включены по умолчанию, например, разные виды лигатур: clig, liga и rlig. Подробнее можно почитать в спецификации.

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

Много примеров с кодом можно найти здесь: OpenType features in CSS.

Как уже говорилось выше, font-feature-settings — это низкоуровневая настройка. Спецификация рекомендует, по возможности, использовать высокоуровневые варианты, например:

  • font-variant-ligatures для управления лигатурами (спецификация)
  • font-variant-caps для приведения строчных к заглавным (спецификация)
  • font-variant-numeric для управления отображением цифр (спецификация)

Больше вариантов можно найти в разделе спецификации Font Feature Properties.

font-feature-settings может использоваться для получения более или менее радикального варианта шрифта:

Ещё интереснее распорядился фичами автор шрифта dT Jakob Variable Concept: он сделал не только вариативный шрифт, но и слоёный, и стиль для каждого из слоёв включается с помощью лигатур:

See the Pen dKZdRV by yoksel (@yoksel) on CodePen.

Не уверена, что это правильное использование лигатур, но вариант, безусловно, интересный.

Использование в реальной жизни

В данный момент не все браузеры поддерживают управление вариативными шрифтами, поэтому помимо настраиваемого шрифта на страницу придётся подключать обычные. Это предлагается делать следующим образом:

Затем с помощью @supports определяется поддержка настроек браузерами и задаётся нужный шрифт:

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

Я совсем недавно начала погружаться в тему, так что могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если найдутся.

CSS font-variant

The font-variant property is a shorthand property for a set of properties that provide control over stylistic font features.

In CSS1 and CSS2, the font-variant property’s sole purpose was to set text to small caps. In CSS3, while it still allows you to specify small caps, it has been expanded to be a shorthand property for the following new font variant subproperties:

So in CSS3 the font-variant property allows you to specify which font features to enable on a font and how they should work. Most modern font technologies support a variety of font features which change the way the font looks in certain cases. For example you can do things like, enable fancy stylistic capital letters (swash caps), have slashes through your zeros, choose between ranging (full-height) and non-ranging (old-style, or lower-case) digits, control of glyph substitution and sizing in East Asian text, and more.

Not all font features will necessarily be available to you all the time. Some font features are applicable only to certain language scripts or specific languages, or in certain writing modes. The font-variant property allows you to enable and/or control specific features as required.

Syntax

Possible Values

CSS3 supports font features that are included in the major font formats such as OpenType and Apple Advanced Typography (AAT).

Below are the values defined in CSS3 (including the OpenType feature tag/s where applicable).

Resets all subproperties to their initial value. Sets font-variant-ligatures to none and resets all other font feature properties to their initial value.

Ligatures

These are the possible values for the font-variant-ligatures property. They are grouped under common ligatures, discretionary ligatures, historical ligatures, and contextual alternates.

Specifies whether common ligatures (OpenType features: liga , clig ) are enabled or not. This can be one of the following values:

Enables display of common ligatures. For OpenType fonts, common ligatures are enabled by default. Disables display of common ligatures.

Specifies whether discretionary ligatures (OpenType feature: dlig ) are enabled or not. This can be one of the following values:


Enables display of discretionary ligatures. Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary. Disables display of discretionary ligatures.

Specifies whether historical ligatures (OpenType feature: hlig ) are enabled or not. This can be one of the following values:

Enables display of historical ligatures. Disables display of historical ligatures.

Specifies whether contextual alternates are enabled or not (OpenType feature: hlig ). This can be one of the following values:

Enables display of contextual alternates. Disables display of contextual alternates.

Alternates

These are the possible values for the font-variant-alternates property.

Enables display of stylistic alternates (font specific, OpenType feature: salt feature-index ).

Enables display of historical forms (OpenType feature: hist ).

Enables display with stylistic sets (font specific, OpenType feature: ss feature-index ). For example, ss01 , ss02 , ss03 , etc

Enables display of specific character variants (font specific, OpenType feature: cv feature-index ). For example, cv01 , cv02 , cv03 , etc

Enables display of swash glyphs (font specific, OpenType feature: swsh feature-index , cswh feature-index ).

Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm feature-index ).

Enables display of alternate annotation forms (font specific, OpenType feature: nalt feature-index ).

These are the possible values for the font-variant-caps property.

Specifies that the font is rendered in small-caps (OpenType feature: smcp ). Small caps typically appear as uppercase letters but in the size of lower case letters.

Илон Маск рекомендует:  Что такое код memmove

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

With normal small caps, any uppercase character is rendered at full uppercase size, while lowercase characters are rendered smaller. However, when the all-small-caps keyword is used, those uppercase characters are rendered at the smaller size.

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

If the font doesn’t support petite capitals, the property behaves as though small-caps had been specified instead.

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

If this keyword is used on a font that doesn’t support this feature, the property behaves as though all-small-caps had been specified instead.

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 ).

Titling capitals are a variant of uppercase designed for heading and titles. The stroke width is reduced for use at larger point sizes where the stroke weight used in smaller text sizes would be too heavy.

If this is used on a font that doesn’t support this feature, the property has no visible effect.

Numeric

These are the possible values for the font-variant-numeric property.

This can be one of the following values:

Enables display of lining numerals (OpenType feature: lnum ). Enables display of old-style numerals (OpenType feature: onum ).

This can be one of the following values:

Enables display of proportional numerals (OpenType feature: pnum ). Enables display of tabular numerals (OpenType feature: tnum ).

This can be one of the following values:

Enables display of lining diagonal fractions (OpenType feature: frac ). Enables display of lining stacked fractions (OpenType feature: afrc ).

Enables display of letter forms used with ordinal numbers (OpenType feature: ordn ).

Enables display of slashed zeros (OpenType feature: zero ).

East Asian

These are the possible values for the font-variant-east-asian property.

This can be one of the following values:


None of the features listed below are enabled. Enables rendering of JIS78 forms (OpenType feature: jp78 ). Enables rendering of JIS83 forms (OpenType feature: jis83 ). Enables rendering of JIS90 forms (OpenType feature: jis90 ). Enables rendering of JIS04 forms (OpenType feature: jis04 ). Enables rendering of simplified forms (OpenType feature: smpl ). Enables rendering of traditional forms (OpenType feature: trad ).

This can be one of the following values:

Enables rendering of full-width variants (OpenType feature: fwid ). Enables rendering of proportionally-spaced variants (OpenType feature: pwid ).

Enables display of ruby variant glyphs (OpenType feature: ruby ).

About the Feature Tags

OpenType is a cross-platform font file format developed jointly by Adobe and Microsoft. Each OpenType Layout feature has a feature tag that identifies its typographic function and effects. For example, the mark feature manages the placement of diacritical marks, and the swsh feature renders swash glyphs.

Many of the possible values of the font-variant property align with these features. Therefore, the feature tag is included here in order to convey this.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Font-variant в CSS

Свойство font-variant определяет характер написания строчных букв.

Это свойство применимо ко всем элементам.

Значение

— normal – обычные строчные буквы

— small-caps — строчные буквы представляют собой заглавные уменьшенного размера. Такой способ написания строчных букв называется капителью ,

— inherit — принимает значение свойства родительского элемента.

Значение по умолчанию

Пример

Пример — Свойство font-variant

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Свойство font-variant

: normal «> Обычные строчные буквы.

: small-caps «> Строчные буквы как заглавные, только меньшего размера.

font-variant

Easily manage projects with monday.com

The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3.

Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps .

A value of small-caps will render the text in uppercase letters that are smaller than regular uppercase letters. This does not override uppercasing set in the content, inside the markup. For example:

In the above demo, both paragraphs are set to font-variant: small-caps . The first paragraph has only the first letter uppercase in the markup, so it appears as expected (first letter uppercase, remainder in small caps).

The second line is written in all uppercase in the markup, which overrides the small-caps value, setting everything in regular uppercase.

Taking this further, if these paragraphs are set to font-variant: small-caps and text-transform: lowercase , then they will appear in all small caps. Similarly, if these paragraphs are set to font-variant: small-caps and text-transform: uppercase , then they will appear in all regular uppercase.

font-variant can be included as part of a font shorthand declaration.

New Additions in CSS3

In CSS3, font-variant becomes a shorthand and can accept multiple values, including all-small-caps , petite-caps , all-petite-caps , titling-caps , and unicase , among others.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

The new values added in CSS3 have no browser support, so the table above represents support for a value of small-caps .

In IE6/7, setting font-variant: small-caps will cause any text set to text-transform: uppercase or text-transform: lowercase to appear like text-transform: none .

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL