Underline css font: text-decoration-skip-ink — CSS: Cascading Style Sheets — Независимое театральное объединение "Зрительские симпатии"

Содержание

text-decoration-skip-ink | CSS | WebReference

Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или прерываться, чтобы пропустить «хвостики» букв (рис. 1).

Рис. 1. Разновидности подчёркивания текста

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

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

text-decoration-skip-ink: auto | none

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

auto: Линия прерывается на выносных элементах символов.
none: Линия отображается сплошной.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>text-decoration-skip-ink</title> <style> p { font-size: 2em; /* Размер текста */ } a { text-decoration-skip-ink: none; /* Сплошной подчёркивание */ } </style> </head> <body> <p><a href=»page/1.html»>Чебурашка</a></p> </body> </html>

Объектная модель

Объект.style.textDecorationSkipInk

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

Спецификация	Статус
CSS Text Decoration Module Level 4	Возможная рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


	79	64	50		70

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Текст и шрифт

См. также

<a>
Атрибуты ссылок
Использование :hover
Наследование в CSS
Создание ссылок
Ссылки
Ссылки
Ссылки в HTML
Якоря

Рецепты

Как заголовок сделать ссылкой?
Как задать цвет ссылок?
Как открыть ссылку в новой вкладке?
Как сделать картинку ссылкой?
Как сделать ссылку для скачивания?
Как сделать ссылку на адрес электронной почты?
Как сделать ссылку на изображение?

Практика

Атрибут target
Картинка как ссылка
Создание ссылки
Ссылка во фрейм
Ссылка для скачивания
Ссылка на email
Ссылка на Google
Ссылка на телефон

Ссылки во фрейме

Справочник CSS

Значения свойств

Функции

Единицы CSS

Типы элементов

@-правила

Анимация

Границы

Контент

Логические

Отступы и поля

Печать

Позиционирование

Псевдоклассы

Псевдоэлементы

Размеры

Списки

Таблицы

Текст и шрифт

Флексы

Форматирование

Формы

Цвет и фон

text-decoration-skip-ink — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-skip-ink указывает, как надчеркивания и подчеркивания рисуются, когда они проходят над надстрочными и подстрочными элементами глифа.

text-decoration-skip-ink не является частью сокращения text-decoration .

 /* Одно ключевое слово */
text-decoration-skip-ink: нет;
текст-украшение-пропустить-чернила: авто;
текст-украшение-пропустить-чернила: все;
/* Глобальные ключевые слова */
text-decoration-skip-ink: наследовать;
text-decoration-skip-ink: начальный;
text-decoration-skip-ink: вернуться;
text-decoration-skip-ink: вернуть слой;
text-decoration-skip-ink: не установлено;

Значения

нет

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

авто

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

все

Браузер должен прерывать подчеркивания и надчеркивания, чтобы они не касались глифа и не приближались к нему слишком близко. Это может быть полезно для некоторых китайских, японских или корейских (CJK) шрифтов, где поведение auto может не создавать прерываний.

Начальное значение	`авто`
Применимо к	все элементы
Унаследовано	да
Расчетное значение	как указано
Тип анимации 900 56	дискретный

 text-decoration-skip-ink = 
 auto | 
 нет | 
 все

HTML

Вы должны отправиться на поиски чашки кофе.

Или, может быть, вы предпочитаете чай?

この文は、 text-decoration-skip-ink: auto の使用例を示しています。

この文は、 text-decoration-skip-ink: all の使用例を示しています。

CSS

 р {
  размер шрифта: 1. 5em;
  оформление текста: подчеркивание синим цветом;
  текст-украшение-пропустить-чернила: авто; /* в любом случае это значение по умолчанию */
}
.no-skip-чернила {
  text-decoration-skip-ink: нет;
}
.пропустить чернила все {
  текст-украшение-пропустить-чернила: все;
}

Результат

Спецификация
Модуль оформления текста CSS, уровень 4 # text-decoration-skip-ink-property

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

украшение текста
текст-украшение-пропустить

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

Типография | Винди CSS

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

Утилиты для управления семейством шрифтов элемента.

без засечек

с засечками

моно

Настройка

 экспорт по умолчанию {
  тема: {
    продлевать: {
      семейство шрифтов: {
        без засечек: ['ui-sans-serif', 'system-ui'],
        с засечками: ['ui-serif', 'Грузия'],
        моно: ['ui-monospace', 'SFMono-Regular'],
        отображать: ['Освальд'],
        тело: ['Открытый Санс'],
      },
    },
  },
}

Семейства шрифтов могут быть указаны как массив или как простая строка с разделителями-запятыми:

 {
  // Формат массива:
  "sans": ["Helvetica", "Arial", "без засечек"],
  // Формат с разделителями-запятыми:
  "sans": "Helvetica, Arial, без засечек",
}

Обратите внимание, что Windi CSS автоматически не экранирует имена шрифтов.

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

 {
  // Не будет работать:
  "sans": ["Экзо 2", /* ... */],
  // Добавляем кавычки:
  "sans": ["\"Экзо 2\"", /* ... */],
}

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

Утилиты для управления размером шрифта элемента.

base

2xl

3xl

4xl

5xl

6xl

7xl

8xl

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      'xs': '.75rem',
      'см': '.875рем',
      «крошечный»: «0,875 рем»,
      «база»: «1рем»,
      «lg»: «1,125 бэр»,
      «xl»: «1,25 бэр»,
      «2xl»: «1,5 бэр»,
      «3xl»: «1,875 бэр»,
      «4xl»: «2,25 бэр»,
      «5xl»: «3rem»,
      «6xl»: «4rem»,
      «7xl»: «5rem»,
    },
  },
}

Вы можете указать высоту строки по умолчанию для каждого из ваших размеров шрифта, используя кортеж формы [fontSize, lineHeight] в вашем файле windi. config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      см: ['14px', '20px'],
      база: ['16px', '24px'],
      LG: ['20px', '28px'],
      xl: ['24px', '32px'],
    },
  },
}

Если вы также хотите указать значение межбуквенного интервала по умолчанию для размера шрифта, вы можете сделать это с помощью кортежа формы [fontSize, {letterSpacing, lineHeight}] в вашем файле windi.config.js.

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер шрифта: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Или также с высотой строки по умолчанию
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        высота строки: '40px',
      }],
    },
  },
}

Сглаживание шрифта

Утилиты для управления сглаживанием шрифта элемента.

сглаживание

субпиксельное сглаживание

Стиль шрифта

Утилиты для управления стилем текста.

курсив

не курсив

Толщина шрифта

Утилиты для управления жирностью шрифта элемента.

тонкий

сверхлегкий

светлый

обычный

средний

полужирный

сверхжирный

черный

400

600

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    Вес шрифта: {
      «линия роста волос»: 100,
      «сверхлегкий»: 100,
      «тонкий»: 200,
      «светлый»: 300,
      «нормальный»: 400,
      «средний»: 500,
      «полужирный»: 600,
      «жирный»: 700,
      «сверхжирный»: 800,
      «очень жирный»: 800,
      «черный»: 900,
    },
  },
}

Font Variant Numeric

Утилиты для управления вариантом чисел.

обычные-числа

порядковые

дробные-ноль

подкладочные числа

числа в старом стиле

пропорциональные числа

табличные числа

диагональные дроби

сложенные дроби

Дефисы

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

нет

ручной

авто

Межбуквенный интервал

Утилиты для управления отслеживанием (межбуквенным интервалом) элемента.

плотнее

нормальный

широкий

самый широкий

0px

2px

0.5em

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    Межбуквенное расстояние: {
      самый плотный: '-.075em',
      плотнее: '-.05em',
      плотно: '-.025em',
      нормальный: «0»,
      широкий: '0,025em',
      шире: «.05em»,
      самый широкий: '.25em',
    },
  },
}

Высота строки

Утилиты для управления интерлиньяжем (высотой строки) элемента.

нет

плотный

нормальный

расслабленный

свободный

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      высота линии: {
        «экстра-рыхлый»: «2,5»,
      },
    },
  },
}

Выступ, размер

Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009).

по умолчанию

7.5px

2rem

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    размер вкладки: {
      см: '2',
      мд: '4',
      лг: '8',
    },
  },
}

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

Утилиты для управления выравниванием текста.

левый

центр

правый

выравнивание

Цвет текста

Утилиты для управления цветом текста элемента.

прозрачный

ток

серый-500

красный-500

желтый-500

синий-500

зеленый-500

9000 2 серый-500/50

красный-500/50

желтый-500 /50

синий-500/50

зеленый-500/50

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    цвет текста: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

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

Утилиты для управления оформлением текста.

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

Утилиты для управления типом оформления текста.

подчеркнутый

надчеркнутый

сквозной

без подчеркивания

Цвет оформления текста

Утилиты для управления цветом оформления текста.

прозрачный

ток

серый-500

красный-500

желтый-500

синий-500

зеленый-500

серый-500/50

9000 2 красный-500/50

желтый-500/50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textDecorationColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Стиль оформления текста

Утилиты для управления стилем оформления текста.

сплошной

двойной

пунктирный

штриховой

волнистый

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

Утилиты для управления толщиной оформления текста.

авто

шрифт

90 002 7

0.1rem

3px

0.3em

Настройка

windi.config. js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationLength: {
        см: '1px',
        мд: '2px',
        LG: '4px',
      },
    },
  },
}

Смещение оформления текста

Утилиты для управления смещением оформления текста.

авто

9000 2 8

0.6rem

8.5px

0.5em

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textDecorationOffset: {
      см: '1px',
      мд: '2px',
      LG: '4px',
    },
  },
}

Прозрачность оформления текста

Утилиты для управления непрозрачностью цвета оформления элемента. Это запасной вариант цвета оформления текста, начиная с WindiCSS v3.4.0.

60 90 007

100

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textDecorationOpacity: {
        10: «0,1»,
        20: «0,2»,
        95: «0,95»,
      },
    },
  },
}

Отступ текста

Утилиты для управления отступом текста.

по умолчанию

2xl

3xl

9 0002 1.8rem

2em

1/2

-xs

-1em

Настройка

windi.config .js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      отступ текста: {
        «4xl»: «5rem»,
        «5xl»: «6rem»,
      },
    },
  },
}

Непрозрачность текста

Утилиты для управления непрозрачностью цвета текста элемента.

60 90 007

100

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      непрозрачность текста: {
        10: «0,1»,
        20: «0,2»,
        95: '0,95',
      },
    },
  },
}

Text Shadow

Утилиты для управления тенью текстового элемента.

по умолчанию

нет

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // Если предоставлена тень ПО УМОЛЧАНИЮ, она будет использоваться для теневая утилита без суффикса.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0,25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Обводка текста

Утилиты для управления обводкой текстового элемента.

Ширина обводки текста

Утилиты для управления шириной обводки текста.

по умолчанию

нет

0.1rem

3px

0.3em

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      textStrokeWidth: {
        'xl': '6',
        «2xl»: «8»,
      },
    },
  },
}

Цвет обводки текста

Утилиты для управления цветом обводки текста.

прозрачный

ток

серый-500

красный-500

желтый-500

синий-500

зеленый-500

9000 2 серый-500/50

красный-500/50

желтый-500 /50

синий-500/50

зеленый-500/50

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    textStrokeColor: {
      первичный: '# 3490dc',
      вторичный: '#ffed4a',
      опасность: '#e3342f',
    },
  },
}

Преобразование текста

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

верхний регистр

нижний регистр

заглавные буквы

обычный регистр

Text Overflow

Утилиты для управления текстом в элементе.

урезать

overflow-ellipsis

overflow-clip

Вертикальное выравнивание

Утилиты для управления вертикальным выравниванием встроенного блока или поля ячейки таблицы.

базовая линия

верхняя

средняя

нижняя

text-top

text-bottom

Whitespace

Утилиты для управления пробелами элемента собственность.

обычная

нововставка

предварительная

Разрыв слов

Утилиты для управления разрывами слов в элементе.

нормальный

слов

все

Режим письма

Утилита режим письма устанавливает, будут ли строки текста располагаться горизонтально или вертикально, а также направление, в котором блоки перемещаются.

text-decoration-skip-ink | CSS | WebReference

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

Синтаксис

Значения

Пример

Объектная модель

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

Браузеры

См. также

Рецепты

Практика

Справочник CSS

Значения свойств

Функции

Единицы CSS

Типы элементов

text-decoration-skip-ink — CSS: Каскадные таблицы стилей

Значения

HTML

CSS

Результат

Обнаружили проблему с содержанием этой страницы?

Типография | Винди CSS

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

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

Сглаживание шрифта

Стиль шрифта

Толщина шрифта

Font Variant Numeric

Дефисы

Межбуквенный интервал

Высота строки

Выступ, размер

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

Цвет текста

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

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

Цвет оформления текста

Стиль оформления текста

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

Смещение оформления текста

Прозрачность оформления текста

Отступ текста

Непрозрачность текста

Text Shadow

Обводка текста

Ширина обводки текста

Цвет обводки текста

Преобразование текста

Text Overflow

Вертикальное выравнивание

Whitespace

Разрыв слов

Режим письма

Добавить комментарий Отменить ответ