Указывать длину в CSS можно в разных единицах. Некоторые из них
пришли из типографской традиции, как пункт (pt)
и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном
обиходе. Есть и «волшебная» единица, придуманная специально для
CSS: px. Значит ли это, что для разных свойств нужны
разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют
прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство
со значением в пикселях (margin: 5px) также
допускает и значения в дюймах или сантиметрах (margin:
1.2in; margin: 0.5cm), и наоборот.
Но в целом для отображения на экране и для печати лучше
использовать разные наборы единиц измерения. Советы
по использованию единиц собраны в следующей таблице:
Если у вас есть под рукой линейка, можете проверить точность
своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):
↑
72pt ↓
Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если
у устройства вывода достаточно высокое разрешение. На лазерном
принтере 1cm должен быть точно равен 1 сантиметру.
Но на устройствах низкого разрешения, вроде компьютерных экранов,
CSS этого не требует. И вправду, разные устройства и разные
реализации CSS норовят отобразить их по-разному. Лучше оставить эти
единицы для устройств высокого разрешения, в частности для печати.
На компьютерных экранах и мобильных устройствах может получиться
не то, что ожидалось.
В прошлом CSS требовал, чтобы абсолютные единицы отображались
правильно даже на компьютерных экранах. Но поскольку неправильных
реализаций было больше, чем правильных, и никаких улучшений
не предвиделось, в 2011-м CSS отказался от этого требования.
Сейчас абсолютные единицы обязаны работать правильно только при
выводе на печать и на устройствах высокого разрешения.
CSS не уточняет, что именно понимается под «высоким
разрешением». Но так как у дешевых принтеров сегодня бывает
не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек
на дюйм, граница, скорее всего, проходит где-то между этими
значениями.
Еще одна причина не использовать абсолютные единицы где-либо,
кроме печати: на разные экраны мы смотрим с разного расстояния.
1 сантиметр на экране настольного компьютера выглядит маленьким.
Но на мобильном экране прямо перед глазами — это много. Лучше
вместо них использовать относительные единицы, напр. em.
Единицы em и
ex зависят от размера
шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому
задан шрифт в 2in, 1em и означает эти 2in. Указание размеров
(напр., для отступов) в em означает, что они
задаются относительно шрифта, и какой бы ни был шрифт
у пользователя — крупный (напр. на большом экране) или мелкий
(напр. на мобильном устройстве), эти размеры останутся
пропорциональными. Объявления наподобие text-indent:
1.5em и margin: 1em в CSS крайне популярны.
Единица ex используется нечасто. В ней выражаются
размеры, которые должны отсчитываться от x-высоты шрифта.
X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов
с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв,
и если важно, чтобы какая-то картинка, например, соответствовала
x-высоте, единица ex к вашим услугам.
Единица px в CSS волшебная. Она не связана
с текущим шрифтом, но и с физическими сантиметрами или дюймами
обычно тоже не связана. Единица px определена как
что-то маленькое, но видимое, т.е. горизонтальную линию толщиной
1px можно было отобразить с четкими краями (без сглаживания). Что
считается четким, маленьким и видимым, зависит от устройства
и способа пользования им: держите ли вы его прямо перед глазами,
как мобильный телефон, на расстоянии вытянутой руки, как монитор,
или где-то на промежуточном расстоянии, как электронную книгу?
Поэтому
px по определению не фиксированная длина,
а нечто, зависящее от типа устройства и его обычного использования.
Чтобы понять, почему единица px именно такая,
представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог
отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть
больше. Свое название единица
px получила от тех
экранных пикселей.
Нынешние устройства в принципе могут отображать и более мелкие
четкие точки (хотя их может быть трудно разглядеть без лупы).
Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры,
в особенности, могут отображать четко отображать линии гораздо
тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же,
как выглядела бы на мониторе. Устройства меняются, но единица
px всегда выглядит одинаково.
На самом деле CSS требует, чтобы 1px был точно
равен 1/96 дюйма при любом выводе на печать. В CSS считается, что
принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати
px не только одинаково выглядит независимо от устройства,
но и заведомо измеряется одной и той же величиной (совсем как
единицы cm, pt, mm, in и
pc, как
объяснялось выше).
CSS также определяет, что растровые изображения (напр.
фотографии) по умолчанию отображаются в масштабе 1 пиксель
изображения на 1px. Фотография разрешением 600 на 400 будет 600px
шириной и 400px высотой. Тем самым пиксели фотографии привязываются
не к пикселям устройства вывода (которые могут быть очень мелкими),
а к единицам px. Это позволяет точно совмещать
изображения с другими элементами документа, при условии, что
вы используете в своих стилях единицы px, а не pt, cm и т.д.
Используйте
em или px для шрифтов
Единицы pt (пункт) and pc (пика)
CSS получил в наследство от печатного дела.
Там традиционно
применялись эти и подобные единицы, а не сантиметры или дюймы.
В CSS незачем использовать pt, пользуйтесь любой
единицей на свой выбор. Но есть хорошая причина
не использовать ни pt, ни других абсолютных
единиц, а использовать только em и px.
Вот несколько линий разной толщины. Некоторые из них могут
казаться четкими, но как минимум линии в 1px и 2px должны быть
четкими и видимыми:
0.5pt,
1px,
1pt,
1.5px, 2px
Если первые четыре линии выглядят одинаковыми (либо линия
в 0.5pt пропала), скорее всего вы видите это на мониторе,
не способном отображать точки мельче 1px. Если линии выглядят
возрастающими по толщине, скорее всего вы видите эту страницу
на качественном экране или на бумаге. А если 1pt выглядит толще,
чем 1.5px, то это скорее всего экран мобильного устройства
(похоже, последняя фраза описывает ситуацию до правки 2011 года —
прим. перев.).
Волшебная единица CSS, px, часто бывает удачным
выбором, особенно если нужно выровнять текст с картинками, либо
просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо
будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em. Идея
в том, чтобы 1) не задавать размер шрифта для элемента BODY
(в HTML), а использовать размер шрифта по умолчанию для устройства,
поскольку это наиболее удобный для читателя размер; и 2) указывать
размеры шрифта других элементов в em: h2
{font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее
основного шрифта страницы.
Едиственное место, где можно использовать pt (либо cm или in) для размера
шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт
был строго определенного размера. Но даже там чаще всего лучше
использовать размер шрифта по умолчанию.
Таким образом, единица px избавляет
от необходимости знать разрешение устройства. Независимо
от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или
1800 dpi), длина, указанная в виде целого числа px,
всегда выглядит хорошо и везде достаточно похоже. Но что, если
мы хотим узнать разрешение устройства, например, чтобы
решить, можно ли использовать линию в 0.5px?
Выход — проверить разрешение с помощью медиавыражений.
Подробности о медиавыражениях — за рамками этой статьи, но вот
небольшой пример:
div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
/* Media with 2 or more dots per px */
div.mybox { border: 1.5px solid }
}
Новые единицы измерения в CSS
Чтобы было еще проще писать стилевые правила, зависящие только
от размера шрифта по умолчанию, с 2013 года в CSS есть новая
единица: rem. Один rem (от «root em»,
т. е. «корневой em» или «em корневого элемента») — это размер шрифта
корневого элемента в документе. В отличие от em,
который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать
элементам P и h2 одинаковый внешний отступ слева, вот для сравнения
CSS-код до 2013 года:
Благодаря другим новым единицам стало можно указывать размеры
относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin,
соответствующая меньшему из vw и vh.
И vmax (можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015
года многие браузеры уже их поддерживали.
Свойства в CSS: шрифт | Шнайдер блог
1807 Посещений
Ранее мы уже разбирали общие вопросы по работе с текстом в CSS, настройку цвета и фона, стилизации цитат, а также текстовые эффекты с использованием тени. Теперь пришло время обратить внимание на еще один важнейший элемент 一 шрифт. Ключевые свойства:
font-family 一 семейства используемого шрифта. Таких семейств может быть несколько (они прописываются через запятую в приоритетном порядке). Шрифты условно поделены на несколько групп:
Serif 一 шрифты с засечками (к примеру, Times New Roman).
Sans-serif 一 шрифты без засечек (Arial).
Monospace 一 непропорциональный шрифт, все знаки которого имеют идентичную ширину (Courier New).
Cursive 一 курсивные шрифты (Calisto MT).
Fantasy 一 нестандартные шрифты (Torhok).
Например, если вы хотите сделать основным шрифтом Times New Roman, добавьте в таблицу стилей следующее:
<style>
body {
font-family: Times New Roman, serif;
}
</style>
Аналогично выставляются и другие шрифты:
Обратите внимание на то, что если на вашем компьютере нет того или иного шрифта, будет использован имеющийся из выбранной группы.
font-style 一 стиль шрифта:
normal (обычный).
oblique (наклонный).
italic (курсивный).
Например:
<style>
body {
font-family: Torhok, fantasy; font-style: italic;
}
</style>
Аналогично “включаются” и другие стили шрифта. Если же вы хотите использовать все три варианта в разных параграфах, поступите следующим образом: задайте каждому параграфу уникальный ID (например, n, o, i) → задайте шрифт для всего текста:
<html>
<head>
<meta charset=»utf-8″>
<title>Шрифты</title>
</head>
<body>
<style>
p#n, p#o, p#i {
font-family: Torhok, fantasy;
}
</style>
<p>Обычный</p>
<p>Наклонный</p>
<p>Курсив</p>
</body>
</html>
Задайте каждому параграфу свой стиль:
p#n { font-style:normal;
}
p#o {font-style:oblique;
}
p#i {font-style:italic;
}
В браузере:
font-variant 一 свойство отвечает за варианты написания букв: обычный (normal) и малые прописные буквы (small-caps). По умолчанию установлен первый вариант, поэтому рассмотрим. как установить small-caps. Например:
<style>
p#n, p#o, p#i {
font-family: Torhok, fantasy;
}
p#n { font-style:normal; font-variant:small-caps;
}
p#o {font-style:oblique;
}
p#i {font-style:italic;
}
</style>
В браузере:
font-weight 一 толщина букв. В этом случае актуальны как числа (100, 200, 300, 400, 500, 600, 700, 800, 900), так и ключевые слова:
normal (нормальный) 一 ему соответствует число 400.
Подчеркнем, что от первого способа лучше воздержаться, так как браузеры по-разному отображают ключевые слова. Благодаря относительным единицам задаются размеры относительно элемента-предка. Что касается единиц измерения длины, то здесь стоит выделить следующие:
px 一 равен точке на экране.
em 一 равен высоте используемого шрифта.
ex 一 равен высоте строчной “х” используемого шрифта.
Не стоит забывать и о пяти абсолютных диницах измерения: mm (один миллиметр), sm (один сантиметр), in (один дюйм), pt (1/72 дюйма), pc (⅙ дюйма). В силу различных обстоятельств рекомендуется использовать три параметра:
pt 一 когда речь идет о фиксированном дизайне веб-портала).
% 一для “резинового” веб-портала.
em 一 для того, чтобы менять размер пропорционально.
Например, зададим общий размер параграфов 一 12 px, первый параграф увеличим на 30%,а третий уменьшим на 20%:
<style>
p#n, p#o, p#i {
font-family: Times New Roman, serif; font-size:12px;
Свойство font-stretch выбирает нормальную, уплотненную или расширенную ширину символов в шрифте.
Допустимые значения
normal — обычная ширина символов в шрифте
semi-condensed — узковатая ширина символов в шрифте
condensed — узкая ширина символов в шрифте
extra-condensed — очень узкая ширина символов в шрифте
ultra-condensed — самая узкая ширина символов в шрифте
narrower — ширина символов в шрифте уже, чем у родительского элемента
semi-expanded — широковатая ширина символов в шрифте
expanded — широкая ширина символов в шрифте
extra-expanded — очень широкая ширина символов в шрифте
ultra-expanded — самая широкая ширина символов в шрифте
wider — ширина символов в шрифте шире, чем у родительского элемента
inherit — ширина символов в шрифте такая же как у родительского элемента
Абсолютные значения, перечисленные от самого узкого до самого широкого: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.
Относительное значение wider расширяет ширину буквы на один пункт из вышеперечисленного списка, т.е. если у родителя font-stretch имеет абсолютное значение semi-expanded, а у дочернего элемента задано относительное значение wider, то абсолютным значением font-stretch у дочернего элемента будет expanded.
Аналогично, относительное значение narrower сужает ширину буквы на один пункт.
Значение по умолчанию
normal
Применимо
ко всем элементам
Наследование
да
Версия CSS
CSS 3
Поддерживается браузерами
Пример
p { font-stretch:wider; }
Твой код:
<html>
<head>
<title></title>
<style type=»text/css»>
<!—
p{
font:italic bold 16px Arial, sans-serif;
}
. exr{
font-stretch:ultra-expanded;
}
.cond{
font-stretch:ultra-condensed;
}
—>
</style>
</head>
<body>
<p>Это текст с обычной толщиной букв</p>
<p>Это текст с самой широкой толщиной букв</p>
<p>Это текст с самой узкой толщиной букв</p>
</body>
</html>Сделай код и жми тут
Результат:
большой полигон
Заметки
Это свойство относится к модулю CSS Fonts Module Level 3 находящемся в разработке W3C, поэтому в нем возможны изменения.
На момент написания статьи это свойство не поддерживается ни одним из распространенных браузеров.
Свойство font-style
Свойство font-size-adjust
CSS: свойства шрифта | СХОСТ блог
Среди ключевых свойств шрифта выделяют font-family 一 семейства шрифта, коих может быть несколько (прописывайте их через запятую). К тому же шрифты можно разделить на несколько групп:
Serif 一 шрифты с засечками.
Sans-serif 一 шрифты без засечек.
Monospace 一 непропорциональный шрифт.
Cursive 一 курсив.
Fantasy 一 необычные шрифты.
Для того, чтобы задать основной шрифт, пропишите в таблице стилей, подставив вместо Times New Roman любой другой шрифт:
<style type=»text/css»>
body {
font-family: Times New Roman, serif;
}
</style>
Уточним, что если на вашем компьютере не установлен желаемый шрифт, автоматически будет использован другой, но из той же группы.
Возможно, вы захотите использовать несколько стилей шрифта. Для этого нужно присвоить ID каждому параграфу и “прописать” стиль для каждого из них:
<html>
<head>
<meta charset=»utf-8″>
<title>Шрифты</title>
</head>
<body>
<style>
p#n, p#o, p#i {
font-family: Torhok, fantasy;
}
p#n { font-style:normal;
}
p#o {font-style:oblique;
}
p#i {font-style:italic;
}
</style>
<p>Обычный</p>
<p>Наклонный</p>
<p>Курсив</p>
</body>
</html>
Кроме того, вы можете использовать свойство font-variant для того, чтобы выбрать варианты написания букв (обычные или малые прописные буквы). Для этого нужно добавить в таблицу стилей несколько строк:
<style>
p#n, p#o, p#i {
font-family: Torhok, fantasy;
}
p#n { font-style:normal; font-variant:small-caps;
}
p#o {font-style:oblique;
}
p#i {font-style:italic;
}
</style>
За толщину букв “отвечает” свойство font-weight. Нормальная толщина букв равняется 400 или же прописывается normal, полужирный (bold) равен 700, bolder ー более жирный, а lighter ー менее жирный:
Размер шрифта (font-size) может задаваться при помощи ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large), относительных единиц (%, em) или единиц измерения длины (px, см, мм, пункты):
<style>
p#n, p#o, p#i {
font-family: Times New Roman, serif; font-size:12px;
От автора: недавно я работала над проектом, в котором поднялась тема переменных шрифтов при обсуждении распознавания очертаний. Я слышала этот термин раньше, но я не совсем понимала, что такое переменный шрифт. Я немного покопалась в Сети и была взволнована, обнаружив все возможности, которые переменные шрифты нам предоставляют.
Что такое переменный шрифт?
Большинство веб-сайтов используют несколько шрифтов, принадлежащих к одному семейству шрифтов. Каждый шрифт хранится в отдельном файле и имеет уникальный набор свойств, таких как ширина, толщина и стиль. Переменные шрифты хранят все эти вариации в одном файле шрифта. В отличие от статических шрифтов, переменные шрифты предоставляют доступ ко всему диапазону ширины, толщины и других свойств. Например, большинство семейств шрифтов включают в себя заданное количество шрифтов с различной толщиной, доступное в инкрементальных значениях от 100 до 900. Переменные шрифты предоставляют возможность использовать любую толщину в пределах указанного диапазона. Так что, если font-weight: 470 идеально подходит для вашего сайта, вы можете использовать его.
Переменные шрифты в действии
Демонстрация ниже предоставляет пример всего диапазона стилей, которые возможны с одним переменным шрифтом. Ползунки можно использовать для настройки толщины, ширины и наклона.
Звучит круто, но …
Если вы похожи на меня и раньше не слышали о переменных шрифтах, вы можете удивиться, насколько они полезны. Есть несколько ключевых причин, по которым стоит использовать переменные шрифты.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Производительность
Как вы уже догадались, возможность доступа ко всему семейству шрифтов из одного файла может повысить производительность. Переменные шрифты уменьшают количество HTTP-запросов к файлом шрифтов и объем данных, которые необходимо извлечь. Несмотря на то, что файлы переменных шрифтов имеют больший размер, они обычно меньше, чем несколько статических файлов шрифтов. Однако есть исключения. Если на вашем сайте используется только одна толщина или стиль шрифта, вы можете не получить того же прироста производительности, что и сайты, использующие несколько шрифтов.
Адаптивный дизайн
Размер экрана часто определяет типографские решения, такие как толщина, размер и т. д. Переменные шрифты позволяют лучше контролировать эти свойства. Такие свойства, как высота х, оптический размер, можно настроить в зависимости от размера экрана, чтобы улучшить читаемость. В демонстрации ниже использует переменный шрифт Amstelvar, чтобы показать переход от низкого к высокому оптическому размеру. При больших размерах контраст увеличивается.
Все буквы масштабируются до одинакового размера для сравнения
Как работают переменные шрифты?
Теперь, когда вы увидели, что могут переменные шрифты, давайте посмотрим, как они работают. Переменные шрифты хранят один контур для каждого символа. Точки, составляющие контур, содержат инструкции о том, как они должны двигаться для создания других стилей. Отдельные стили интерполируются с использованием этих инструкций. Изменения производятся по разным осям, например по оси толщины.
Оси вариаций
Оси вариации описывают, какие свойства являются переменными и каков допустимый диапазон для этих свойств. Переменные шрифты могут иметь два типа осей: зарегистрированные оси и пользовательские оси.
Зарегистрированные оси являются наиболее распространенными и определяются явно. Есть пять зарегистрированных осей: weight, width, italic, slant и optical size. Каждая зарегистрированная ось имеет соответствующий четырехбуквенный тег и может быть сопоставлена с существующими свойствами CSS.
Обратите внимание, что зарегистрированные оси не являются обязательной функцией. Решение о том, какие оси включать, принимается дизайнером шрифтов.
В дополнение к зарегистрированным осям разработчики шрифтов могут включать пользовательские оси. Пользовательские оси открывают множество творческих возможностей, потому что не существует ограничений по объему, определению или количеству разрешенных пользовательских осей. Подобно зарегистрированным осям, пользовательские оси имеют соответствующий четырехбуквенный тег. Однако теги пользовательских осей должны указываться в верхнем регистре. Например, распространенная пользовательская ось — это уровень, она обычно представлена четырехбуквенным тегом GRAD.
Пристальный взгляд на теги
Я упоминала теги несколько раз, так что вы можете быть удивлены, как их использовать. Спецификации CSS предпочитают использовать font-weight, font-stretch, font-style и font-optical-sizing для контроля зарегистрированных осей, где это возможно. Пользовательские оси могут быть доступны с помощью свойства font-variation-settings. В приведенном ниже примере GRAD — это пользовательская ось.
Переменные шрифты создают новые возможности для преобразования типографики. От практических случаев использования, таких как улучшение читабельности, до более творческих применений, таких как эти иллюстративные шрифты от Typearture. Если вы хотите провести свои собственные исследования, есть несколько отличных мест для поиска переменных шрифтов: Axis-Praxis и V-шрифты.
Автор: Danielle Romo
Источник: //cloudfour.com
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
CSS3. Основы
Прямо сейчас изучите CSS3 с нуля!
Смотреть
Урок 6. Шрифты
Для изменения параметров шрифтов в CSS используется свойство font
Font-family — задает непосредственно сам шрифт. Шрифты можно разделить на группы:
Serif — шрифты с засечками, например, Times New Roman.
Sans-serif — шрифты рубленные, без засечек, например, Arial.
Monospace — моноширинные шрифты, например, Courier New.
Cursive — курсивные шрифты, например, Calisto MT.
Fantasy — декоративные шрифты, например, Torhok.
Пример:
Font-family можно задавать группу шрифтов. Например:
body{ font-family: Verdana, sans-serif; }
Теперь текст на странице будет написан шрифтом Verdana, а при отсутствие у пользователя такого шрифта на компьютере будет использоваться другой из группы sans-serif. Шрифт подбирается автоматически на наиболее близкий ему по виду. Можно прописывать несколько шрифтов через запятую, в порядке убывания приоритета.
Font-style — задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Создадим html-страница с тремя параграфами и пропишем каждому ID:
<html> <head> <title>css шрифты</title> <link rel=»stylesheet» type=»text/css» href=»/style.css»> </head> <body> <p>Текст в параграфе с идентификатором sn. </p> <p>Текст в параграфе с идентификатором so.</p> <p>Текст в параграфе с идентификатором si.</p> </body> </html>
Для сокращения записи перечисляем свойства через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Любое из свойств, кроме font-size и font-family, можно пропустить. Пример:
Сначала сокращенной записью мы прописали свойства font для всех параграфов, потом создали отличия для второго и третьего параграфов. Проверяем:
Font Weight толщина шрифта изменить сайт WordPress – info-effect.ru
На чтение 2 мин. Опубликовано
Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как очень просто и быстро изменить вес или толщину шрифта на сайте WordPress. Вы сможете изменить толщину шрифта текста на своём сайте, то есть, сделать текст толще или тоньше, можно сделать текст жирным. Вы сможете очень просто изменить параметр Font Weight с помощью визуального CSS редактора. Вы сможете сразу же наблюдать за всеми изменениями на сайте, перед тем как сохранить CSS стили. Очень простой и полезный плагин !
Установить плагин SiteOrigin CSS вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Данный плагин мы уже разбирали, о всех его возможностях и функциях можете посмотреть здесь. Далее, я вам только покажу как изменить толщину шрифта и всё.
После установки и активации плагина, перейдите на страницу: Внешний вид – Custom CSS. На странице плагина, вверху справа, нажмите на кнопку в виде одного глазика.
Далее, у вас откроется ваш сайт с CSS редактором. Вверху страницы вы можете указать URL адрес страницы вашего сайта, на которой вы хотите изменить толщину шрифта. Далее, на странице нажмите мышкой по тексту, который хотите изменить. В CSS редакторе, вверху слева, у вас появится название CSS элемента.
Далее, на вкладке “Text”, в поле параметра “Font Weight” выберите толщину или значение шрифта. У вас на сайте сразу же отобразятся все изменения. В конце, нажмите вверху на кнопку-галочку.
Далее, на странице плагина у вас появятся CSS стили для изменения толщины шрифта. Нажмите на кнопку – Save CSS, чтобы сохранить новые стили.
Всё готово ! После сохранения стилей, на вашем сайте отобразятся все сделанные изменения ! Не забудьте обновить страницу или удалить кэш.
Свойство CSS text-decoration-Thickness устанавливает толщину обводки декоративной линии, которая используется в тексте в элементе, таком как сквозная линия, подчеркивание или наложение.
Браузер выбирает подходящую ширину для линии оформления текста.
от-шрифт
Если файл шрифта содержит информацию о предпочтительной толщине, используйте это значение. Если файл шрифта не включает эту информацию, ведите себя так, как если бы было установлено auto , а браузер выбрал подходящую толщину.
<длина>
Задает толщину линии оформления текста как <длина> , отменяя предложенный файл шрифта или значение по умолчанию в браузере.
<процент>
Задает толщину линии оформления текста как <процент> из 1em в текущем шрифте.Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Браузер должен использовать минимум 1 пиксель устройства. Для данного применения этого свойства толщина постоянна по всему блоку, к которому оно применяется, даже если есть дочерние элементы с другим размером шрифта.
авто | from-font | <длина> | <процент>
Различная толщина
HTML
Вот текст с красным подчеркиванием в 1 пиксель.
У этого есть красная линия подчеркивания 5 пикселей.
Примечание : свойство раньше называлось text-decoration-width , но в 2019 году было обновлено до text-decoration-Thickness .
таблиц BCD загружаются только в браузере.
Толщина шрифта устарела в HTML5, но вот новый CSS »
Устарели, атрибуты HTML
Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
Атрибут
HTML-тега
Что делает шрифт устаревшим в HTML5, а вот новый CSS ?
Используется для обозначения веса (жирности) текста. Не рекомендуется. Вместо этого используйте CSS.
Элемент Font и его атрибуты устарели. Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте CSS. Узнайте больше, прочитав наш учебник по шрифтам и веб-типографике.
Свойство CSS font-weight указывает, насколько жирным должны быть символы. font-weight можно присвоить кратное 100 от 100 до 900 (900 — самый жирный).Так, например, это правило (добавленное в HTML-документ в теге STYLE или во внешней таблице стилей) гласит, что элементы должны иметь вес 900:
h3 {font-weight: 900; }
, что означает, что элемент отображается следующим образом:
Weighty Matters
Вы также можете использовать слова «нормальный» (то же, что и 400), «жирный» (то же, что и 700), «Смелее» (относительное утверждение, означающее, что текст жирнее, чем окружающий элемент) или «светлее» (делает текст светлее, чем окружающий элемент). Поскольку немногие шрифты имеют девять оттенков жирности, в большинстве шрифтов от 100 до 500 одинаковы, от 600 до 800 одинаковы, а 900 — самый жирный. Одним из ответвлений этого является то, что, хотя «нормальным» является 400, во многих случаях 100 на самом деле не легче. Если вы не используете гарнитуру с множеством доступных начертаний шрифта, нет практического способа представить текст с плотностью, меньшей, чем обычно. Чтобы узнать больше об этой теме, см. Наше руководство по шрифтам и веб-типографике.
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах
Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах
В этом разделе спецификации обсуждаются некоторые элементы HTML и
атрибуты, которые могут использоваться для визуального форматирования элементов. Многие из
они устарели.
15.1 Форматирование
15.
1.1 Цвет фона
Определения атрибутов
bgcolor = цвет [CI]
Не рекомендуется. Этот атрибут устанавливает цвет фона для текста документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона холста для
тело документа (элемент BODY ) или для
столы (элементы TABLE , TR , TH и TD ). Дополнительные атрибуты для указания
цвет текста может использоваться с BODY элемент.
Этот атрибут устарел и заменен таблицами стилей для
указание информации о цвете фона.
15.1.2
Мировоззрение
Можно выравнивать элементы блока (таблицы, изображения, объекты,
абзацы и т. д.) на холсте с выравниванием элемент. Хотя этот атрибут может быть установлен для многих элементов HTML, его
диапазон возможных значений иногда отличается от элемента к элементу. Мы тут
обсуждайте только значение атрибута align для текста.
Определения атрибутов
выровнять = слева | по центру | справа | по ширине [CI]
Не рекомендуется. Этот атрибут определяет горизонтальный
выравнивание своего элемента относительно окружающего контекста.
Возможные значения:
слева : текстовые строки отображаются заподлицо слева.
по центру : текстовые строки по центру.
справа : текстовые строки отображаются заподлицо справа.
выравнивание : текстовые строки выравниваются по обоим полям.
Значение по умолчанию зависит от основного направления текста. Для оставленных
правый текст, по умолчанию align = left , а для
текст справа налево, по умолчанию align = right .
УСТАРЕВШИЙ ПРИМЕР: В этом примере заголовок центрируется на холсте.
Как вырезать по дереву
Используя CSS, например, вы можете добиться такого же эффекта следующим образом:
<ГОЛОВА>
Как резать по дереву
<ТЕЛО>
Как вырезать из дерева
Обратите внимание, что это будет центрировать все h2 декларации. Вы можете уменьшить объем стиля, установив класс атрибут элемента:
<ГОЛОВА>
Как резать по дереву
<ТЕЛО>
Как вырезать из дерева
УСТАРЕВШИЙ ПРИМЕР: Аналогичным образом, чтобы выровнять абзац на холсте по правому краю с помощью HTML выровнять атрибут вы можете иметь:
...Много текста абзаца ...
, который с CSS будет:
<ГОЛОВА>
Как резать по дереву
<ТЕЛО>
... Много текста абзаца ...
УСТАРЕВШИЙ ПРИМЕР: Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их DIV элемент:
... текст в первом абзаце...
... текст во втором абзаце ...
... текст в третьем абзаце . ..
В CSS свойство text-align наследуется
из родительского элемента, вы можете использовать:
<ГОЛОВА>
Как резать по дереву
<ТЕЛО>
... текст в первом абзаце ...
...text во втором абзаце ...
... текст в третьем абзаце ...
Чтобы центрировать весь документ с помощью CSS:
<ГОЛОВА>
Как резать по дереву
<ТЕЛО>
... корпус по центру ...
ЦЕНТР Элемент в точности эквивалентен указанию элемента DIV с атрибутом align , установленным на «center». Элемент CENTER устарел.
15.1.3 Плавающие объекты
Изображения и объекты могут появляться непосредственно «в строке» или могут перемещаться в
одну сторону страницы, временно изменяя поля текста, которые могут
поток по обе стороны от объекта.
Плавать объект
Атрибут align для объекта, изображений,
таблицы, фреймы и т. д. заставляет объект перемещаться к левому или правому краю.
Плавающие объекты обычно начинают новую строку.Этот атрибут принимает
следующие значения:
left: Перемещает объект в текущее левое положение
прибыль. Последующий текст течет по правой стороне изображения.
right: Перемещает объект вправо
прибыль. Последующий текст перемещается по левой стороне изображения.
УСТАРЕВШИЙ ПРИМЕР: В следующем примере показано, как перемещать IMG элемент к текущему
левое поле холста.
Некоторые атрибуты выравнивания также допускают «центральное» значение, которое
не вызывает плавающего, но центрирует объект в текущем
поля. Однако для P и DIV значение «center» вызывает
содержимое центрируемого элемента.
Плавающий текст вокруг объекта
Другой атрибут, определенный для BR элемент, управляет потоком текста вокруг плавающих объектов.
Определения атрибутов
прозрачный = нет | слева | справа | все [CI]
Не рекомендуется. Указывает, где должна отображаться следующая строка в визуальном браузере
после разрыва строки, вызванного этим элементом. Этот атрибут учитывается
счетные плавающие объекты (изображения, таблицы и др.). Возможные значения:
нет: Следующая строка начнется нормально.
Это значение по умолчанию.
осталось: Следующая строка начнется с ближайшего
линия под любыми плавающими объектами на левом поле.
справа: Следующая строка начинается с ближайшего
линия под любыми плавающими объектами на правом поле.
все: Следующая строка начинается с ближайшего
линия под любыми плавающими объектами на любом поле.
Рассмотрим следующий визуальный сценарий, в котором текст перетекает вправо.
изображения до тех пор, пока линия не прервется на BR :
Используя таблицы стилей, вы можете указать, что все разрывы строк должны вести себя
так для объектов (изображений, таблиц и т. д.)) плавающий против левого
прибыль. С помощью CSS вы можете добиться этого следующим образом:
Чтобы указать это поведение для конкретного экземпляра элемента BR , вы можете объединить информацию о стиле
и атрибут id :
Следующие элементы HTML определяют информацию о шрифте. Несмотря на то что
не все они устарели, их использование не рекомендуется в пользу стиля
листы.
15.2.1 Элементы стиля шрифта:
TT , I , B , BIG , SMALL , STRIKE , S и U элементы
Начальный тег: требуется , Конечный тег: требуется
Атрибуты, определенные в другом месте
id , класс (на уровне документа
идентификаторы)
язык (язык
информация), дирек (направление текста)
Отображение элементов стиля шрифта зависит от пользовательского агента.Ниже приводится только информативное описание.
TT: Отображает как телетайп или моноширинный текст.
I: Отображает шрифт курсивом.
B: Отображает полужирный текст.
BIG: Отображает текст «крупным» шрифтом.
МАЛЕНЬКИЙ: Отображает текст «мелким» шрифтом.
STRIKE и S: Не рекомендуется. Отрисовка текста в стиле зачеркивания.
U: Не рекомендуется. Отображает подчеркнутый текст.
Следующее предложение показывает несколько типов текста:
жирный ,
курсив , жирный курсив , текст телетайпа и
большой и маленький текст.
Эти слова можно было бы перевести следующим образом:
Можно добиться гораздо большего разнообразия эффектов шрифта, используя
таблицы стилей. Чтобы указать синий курсивный текст в абзаце с помощью CSS:
<ГОЛОВА>
... Много синего курсива ...
Элементы стиля шрифта должны быть правильно вложены. Отрисовка вложенных
элементы стиля шрифта зависят от пользовательского агента.
15.2.2 Элементы модификатора шрифта:
FONT и BASEFONT
FONT и BASEFONT устарели.
См. Переходный DTD
для формального определения.
Определения атрибутов
размер = cdata [CN]
Не рекомендуется. Этот атрибут устанавливает размер шрифта. Возможные значения:
Целое число от 1 до 7. Устанавливает фиксированный размер шрифта,
рендеринг которых зависит от пользовательского агента. Не все пользовательские агенты могут
визуализируйте все семь размеров.
Относительное увеличение размера шрифта.Значение «+1» означает один размер.
больше. Значение «-3» означает на три размера меньше. Все размеры принадлежат
шкала от 1 до 7.
цвет = цвет [CI]
Не рекомендуется. Этот атрибут устанавливает цвет текста.
грань = cdata [CI]
Не рекомендуется. Этот атрибут определяет
список названий шрифтов, разделенных запятыми, который должен
ищите в порядке предпочтения.
Атрибуты, определенные в другом месте
Элемент FONT изменяет размер шрифта и
цвет текста в его содержимом.
Элемент BASEFONT устанавливает базовый шрифт
размер (с использованием атрибута размер ). Размер шрифта
изменения, достигнутые с FONT , относятся к
базовый размер шрифта установлен BASEFONT . Если BASEFONT не используется, размер основного шрифта по умолчанию
составляет 3.
УСТАРЕВШИЙ ПРИМЕР: Следующий пример покажет разницу между семью
размеры шрифта доступны с FONT :
Ниже показан пример влияния относительных размеров шрифта с использованием
базовый размер шрифта 3:
Базовый размер шрифта не применяется к заголовкам, за исключением
изменяются с помощью элемента FONT с
относительное изменение размера шрифта.
15,3 Правила:
HR элемент
Начальный тег: требуется , Конечный тег: запрещено
Определения атрибутов
выровнять = слева | в центре | справа [CI]
Не рекомендуется. Этот атрибут определяет горизонтальный
выравнивание правила относительно окружающего контекста.
Возможные значения:
слева : правило отображается заподлицо слева.
по центру : линейка по центру.
справа : правило отображается заподлицо.
По умолчанию align = center .
без оттенка [CI]
Не рекомендуется. Если установлено, этот логический атрибут запрашивает, чтобы пользовательский агент
отобразить правило сплошным цветом, а не традиционным
двухцветная «выемка».
размер = пиксель [CI]
Не рекомендуется. Этот атрибут определяет высоту правила. Значение по умолчанию для
этот атрибут зависит от пользовательского агента.
ширина = длина [CI]
Не рекомендуется. Этот атрибут определяет ширину правила. Ширина по умолчанию
100%, т.е. правило распространяется на весь холст.
Атрибуты, определенные в другом месте
id , класс (на уровне документа
идентификаторы)
lang (язык
информация), дирек (направление текста)
Элемент HR вызывает горизонтальную линейку
для визуализации визуальными пользовательскими агентами.
Размер вертикального пространства, вставленного между правилом и содержимым. то, что его окружает, зависит от пользовательского агента.
УСТАРЕВШИЙ ПРИМЕР: Это
пример центрирует правила, изменяя их размер до половины доступной ширины между
поля. Верхнее правило имеет толщину по умолчанию, а два нижних
установлены на 5 пикселей. Нижняя линейка должна отображаться сплошным цветом.
без штриховки:
Эти правила могут быть представлены следующим образом:
Подчеркивание с помощью CSS — tempertemper
Если вы не подчеркиваете ссылки, то должны.Есть несколько способов подчеркнуть ссылки; text-decoration: подчеркивание является наиболее очевидным, поскольку именно так оформляются ссылки по умолчанию, а border-bottom предлагает нам немного больше гибкости. Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью text-decoration: underline ?
Зачем беспокоиться, если это уже работает для нас с границами? Что ж, text-decoration: подчеркивание лучше типографически , так как подчеркивания хорошо сидят на базовой линии слов, проходя через нисходящие элементы (части букв, которые идут ниже базовой линии в таких буквах, как g , p и y ), тогда как border-bottom подчеркивания располагаются под под нижним нижним расположением , что означает слишком большое расстояние между словами и их подчеркиванием, когда.
Не только это, но браузеры теперь обнаруживают нисходящие элементы, а text-decoration underline аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому по умолчанию он включен.
Итак, как нам получить этот визуальный эффект с text-decoration: underline , который у нас всегда был через border-bottom ?
Подчеркнутый, надстрочный
Здесь мы говорим о подчеркивании, но стоит сделать это заранее с небольшим касательным: text-decoration-line , как и text-decoration , имеет 3 позиции:
Под текстом ( подчеркивание )
По тексту ( сквозная )
Над текстом ( над текстом )
text-decoration-line также допускает несколько значений, поэтому мы можем иметь строки под, сквозь и над одним и тем же блоком текста. Немного странно, но он есть:
Подчеркнуть. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; есть 5 вариантов:
штриховая
двойной
с точками
цельный
волнистый
Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. Д.Просто добавьте объявление text-decoration-style :
оформление текста: подчеркивание; стиль оформления текста: волнистый;
Цвет подчеркивания
Отличный. text-decoration-color позволяет нам изменить цвет подчеркивания. Он принимает любое нормальное значение цвета CSS, будь то ключевое слово, шестнадцатеричное, RGB, RGBA, HSL и т. Д .:
Превращается в CSS! К счастью, как и поля, отступы, радиус границы и множество других свойств CSS, text-decoration теперь является сокращением, в котором мы можем объявить несколько значений:
Обратите внимание, что в этом примере я не добавил свойство text-decoration-Thickness . Для этого есть веская причина: поддержка браузера.
Прогрессивное улучшение
Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Старые версии (и Internet Explorer 11 и ниже, разумеется) должны получить стандартный, но все же очень удобный для пользователя подчеркивание, если в вашем сбросе CSS нет ничего подобного:
a { текстовое оформление: отсутствует; }
Но имейте в виду, поддержка браузером зависит от:
недвижимость, которую вы используете
ценности в собственности
Префиксы, необходимые для сокращения
Если вы используете стенографию, вам понадобятся префиксы поставщиков для Safari, чтобы делать ставки:
Достаточно просто сделать, если вы автоматизируете вещи с помощью Autoprefixer, и не слишком много дополнительной работы, если вы пишете его от руки. Опять же, браузеры, которые не поддерживают сокращение text-decoration , должны просто вернуться к этому подчеркиванию по умолчанию.
text-decoration-Thickness не так хорошо поддерживается, как другие
Браузер поддерживает text-decoration-line , text-decoration-style и text-decoration-color довольно хорошо. Каждый браузер реализовал все три одновременно, но управление толщиной подчеркивания было введено намного позже.Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).
Более того, Firefox в настоящее время является браузером only для поддержки толщины в сокращении, поэтому, если вы хотите использовать толщину в сокращении, вам нужно будет сделать классическое двойное объявление, чтобы другие браузеры получили значение, которое они понимают:
текст-украшение-толщина и проценты не играют хорошо
Также будьте осторожны при использовании процентных значений толщины, поскольку их поддерживает только Firefox.
Хорошая новость заключается в том, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-Thickness: 0.1em совпадает с text-decoration-Thickness: 10% , так что вы можете также придерживаться em s, поскольку они фактически делают то же самое.
Пиксели присутствуют всегда ( пикселей, ), но с точки зрения типографики лучше сохранить толщину линии относительно текста, который она подчеркивает, поэтому, если пользователь увеличивает размер текста на экране, подчеркивание увеличивается пропорционально.
толщина текстового украшения беспорядок
Будьте осторожны при объединении text-decoration-style с text-decoration-Thickness . Все, кроме стандартной сплошной линии (и, возможно, двойной линии ), может выглядеть неаккуратно, если толщина установлена слишком большой. Эти волнистые , пунктирные и пунктирные почти всегда обрезаются в неопрятных местах, когда пропускают нижние элементы, и в конце слова.
Рекомендации по удобству использования
Как и в случае с большинством CSS, помните: большая мощность дает большую ответственность, и с точки зрения удобства использования я бы опасался использовать что-либо, кроме сплошного подчеркивания для стилизации ссылки.
Значит, у вас все в порядке, если вам нужно:
подчеркивание другого цвета
прогрессивно усиленный толстый подчеркивание
возможно даже двойное подчеркивание
Но будьте осторожны со всем остальным:
text-decoration-line: line-through — это в основном то, как выглядят элементы с зачеркиванием
text-decoration-line: overline выглядит странно, из-за чего текст над ссылкой может выглядеть как ссылка
волнистый , пунктирный или пунктирный подчеркивания может выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки
Там, где я думаю, волнистый , пунктирный или пунктирный могут работать нормально, однако, для состояний наведения.
Что бы я сделал
Shorthand поставляется с префиксами поставщиков и изворотливыми двойными объявлениями, поэтому я бы начал с классического text-decoration: underline; и улучшите его. Я был бы склонен избегать чего-либо, кроме прямого подчеркивания, которое хорошо известно пользователям, поэтому text-decoration-line отсутствует; что оставляет мне всплеск цвета и приятную толщину на основе для браузеров, отличных от Chromium:
Иногда нам нужно создать текст и добавить контур к тексту. В основном есть два метода создания границы для шрифтов, перечисленных ниже:
Метод 1: Использование свойства text-shadow: Свойство text-shadow используется для добавления границы шрифта или тени к тексту. Синтаксис:
тень текста: h-тень v-тень радиус размытия цвет | нет | начальный | наследование;
Значения собственности:
h-shadow: Устанавливает горизонтальную тень вокруг шрифта.
v-shadow: Устанавливает вертикальную тень вокруг шрифта.
blur-radius: Устанавливает радиус размытия вокруг шрифта.
цвет: Устанавливает цвет вокруг шрифта.
нет: Ничего не устанавливает вокруг шрифта.
initial: Устанавливает для границы шрифта значение по умолчанию.
inherit: Наследует значения свойств от своих родительских значений.
Возвращаемое значение: Возвращает границу / тень шрифта вокруг текста. Пример 1: В этом примере свойство text-shadow используется для создания тени к тексту.
HTML
< HTML >
< голова >
< титул >
CSS свойство text-shadow
титул >
< стиль >
h2 {
тень текста: 0 0 3px # FF0000, 0 0 5px # 0000FF;
}
стиль >
головка >
< корпус >
< h2 > GeeksforGeeks h2 >
корпус >
html >
Выход:
Пример 2: В этом примере свойство text-shadow используется для создания текста с рамкой.
HTML
< HTML >
< голова >
< титул >
CSS свойство text-shadow
титул >
< стиль >
.GFG {
цвет: белый;
размер шрифта: 50 пикселей;
тень текста: -1px 1px 0 # 000,
1 пикс. 1 пикс. 0 # 000,
1 пикс. -1 пикс. 0 # 000,
-1px -1px 0 # 000;
}
стиль >
головка >
< корпус >
< p class = "GFG" > GeeksforGeeks p >
корпус >
html >
Выход:
Метод 2: Использование свойства text-stroke: Свойство text-stroke используется для добавления обводки к тексту. Это свойство можно использовать для изменения ширины и цвета текста. Это свойство поддерживается с помощью префикса -webkit-. Пример: В этом примере свойство text-stroke используется для создания текста с рамкой.
HTML
< HTML >
< голова >
< титул >
CSS свойство text-stroke
титул >
< стиль >
.GFG {
цвет: белый;
размер шрифта: 50 пикселей;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: черный;
}
стиль >
головка >
< корпус >
< p class = "GFG" > GeeksforGeeks p >
корпус >
html >
Выход:
Модуль оформления текста CSS, уровень 4
1.
Введение
Этот подраздел не является нормативным.
Этот модуль охватывает оформление текста, т.е. украшение глифов.
текста, набранного в соответствии с правилами шрифтов и типографикой.
(См. [CSS-TEXT-3] и [CSS-FONTS-3].)
Такие особенности традиционно используются не только в чисто декоративных целях,
но также в некоторых случаях, чтобы подчеркнуть, для вежливости,
и для обозначения редакционных изменений, таких как вставки, удаления и орфографические ошибки.
CSS Уровни 1 и 2 определяли только самые простые украшения линий (подчеркивание, оверлейт и зачеркивание).
соответствует западным типографским традициям.На 3 уровне этого модуля добавлена возможность изменять
цвет, стиль, положение и непрерывность этих украшений,
а также введены знаки ударения (традиционно используемые в восточноазиатской типографике),
и тени (которые были предложены, а затем отложены с Уровня 2).
Уровень 4 вводит дополнительный контроль над этими украшениями.
1"> 1.1. Модуль взаимодействия
Этот модуль заменяет и расширяет декорирование текста
функции, определенные в [CSS-TEXT-DECOR-3].
Все свойства в этом модуле
может применяться к псевдоэлементам :: first-line и :: first-letter.
1.2. Определения значений
Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].
Типы значений, не определенные в этой спецификации, определены в CSS Values & Units [CSS-VALUES-3].
Комбинация с другими модулями CSS может расширить определения этих типов значений.
В дополнение к значениям для конкретных свойств, перечисленным в их определениях,
все свойства, определенные в этой спецификации
также принимают ключевые слова CSS в качестве значения свойства.Для удобства чтения они не повторяются явно.
1,3. Терминология
Термины типографский знак ( знак ), типографский буквенный блок (буква),
и язык содержимого, используемый в этой спецификации, определены в [CSS-TEXT-3]. Другая терминология и концепции, используемые в этой спецификации, определены.
в [CSS2] и [CSS-WRITING-MODES-4].
2. Оформление линии: подчеркивание, подчеркивание и зачеркивание
Следующие свойства описывают украшения строк, которые добавляются к содержимому элемента.При указании или распространении на встроенный блок,
эта коробка становится украшающей коробкой для этого украшения,
нанесение украшения на все его фрагменты.
Затем оформление распространяется на любые блоки на уровне блока в потоке, которые разделяют встроенный
(см. CSS2.1 раздел 9.2.1.1).
При указании или распространении на контейнер блока, который устанавливает встроенный контекст форматирования,
украшения распространяются на анонимный встроенный блок, который оборачивает все текущие дочерние элементы на встроенном уровне контейнера блока.При указании на контейнере с рубином или его распространении на него,
украшения распространяются только на рубиновую основу. Для всех остальных типов ящиков
украшения распространяются на всех дочерних элементов.
Обратите внимание, что оформление текста не распространяется на потомков вне потока,
ни к содержимому атомарных потомков строкового уровня, таких как строчные блоки и строчные таблицы.
Они также не распространяются на встроенные дочерние элементы встроенных блоков,
хотя на такие коробки нанесено украшение .
Подчеркивание, надчеркивание и сквозные линии отображаются только для незамещенных строчных блоков,
и отображаются по всему тексту (включая пробелы, межбуквенные и межсловные интервалы)
кроме пробелов (пробелы, межбуквенные и межсловные интервалы) в начале и в конце строки. Атомарные строчки, такие как изображения и строчные блоки, не декорируются.
Поля, границы и заполнение рамки украшения всегда пропускаются,
однако поля, граница и отступ дочерних строковых блоков - нет.
Обратите внимание, что CSS 2.1 требует всегда пропускать поля, границы и отступы. На Уровне 3 и выше по умолчанию
пропускаются только поля, границы и заполнение рамки украшения.
В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому значению по умолчанию.
При относительном расположении потомка перемещаются все текстовые украшения
применяется к нему вместе с текстом потомка; это не влияет
расчет начального положения украшения на этой линии.
Свойство видимости, тень текста, фильтры и другие графические преобразования
аналогичным образом влияют на оформление текста как часть текста, на котором они нарисованы,
даже если украшения были указаны в поле предка,
и не влияют на расчет их начального положения или толщины.(В случае линейных украшений, нарисованных поверх атомарной встроенной строки или через поля / границы / отступы незамещенного встроенного блока,
они аналогично связаны с затронутым атомарным встроенным / незамещенным встроенным блоком
а не с украшением коробки.)
В следующей таблице стилей и фрагменте документа:
цитата {текст-украшение: подчеркивание; цвет синий; }
em {display: block; }
цитируй {цвет: фуксия; }
<цитата>
Помогите помогите!
Я под шляпой!
—GwieF
. .. подчеркивание элемента цитаты переносится на
анонимный встроенный блок, который окружает элемент span, вызывая
текст "Помогите, помогите!" быть синим, с синим подчеркиванием от
анонимная строка под ним, цвет взят из
элемент цитаты. текст в блоке em также подчеркнут, поскольку он находится во входном блоке для
которым подчеркивается подчеркивание. Последняя строка текста - фуксия,
но подчеркивание под ним по-прежнему остается синим подчеркиванием
анонимный встроенный элемент.На этой диаграмме показаны блоки, использованные в приведенном выше примере. В
закругленная морская линия представляет собой анонимную обертку встроенного элемента
встроенное содержимое элемента абзаца, закругленная синяя линия
представляет элемент span, а оранжевые линии представляют
блоки.
Примечание: линейные украшения распространяются через дерево блоков,
не по наследству,
и, таким образом, не влияют на потомков
при указании в элементе с display: contents.
2.1. Линии оформления текста: свойство
text-decoration-line.
Это свойство,
которое является подсвойством сокращения text-decoration,
указывает, какие украшения строки, если они есть, добавляются элементом.
Значения, отличные от text-decoration-line, заставляют элемент создавать указанные текстовые украшения,
и применять и размножать его, как описано выше.
Примечание: если это не требуется для цвета, стиля и толщины линий
устанавливается объявлениями ниже в каскаде,
безопаснее использовать сокращение text-decoration вместо этого longhand.
Значения имеют следующие значения:
нет
Не производит и не запрещает оформление текста.
подчеркнутый
Каждая строка текста подчеркнута.
стр.
Каждая строка текста имеет над ней черту
(т.е. на противоположной стороне от подчеркивания).
сквозной
Каждая строка текста проходит по середине.
мигает
Текст мигает (чередуется между видимым и невидимым).
Соответствующие пользовательские агенты могут просто не мигать текстом.
Обратите внимание, что отсутствие мигания текста - это один из способов удовлетворения контрольной точки 3.3 WAI-UAAG.
Это значение - , устаревшее в пользу анимации [CSS3-ANIMATIONS].
орфографическая ошибка
Это значение указывает тип оформления текста
используется пользовательским агентом для выделения орфографических ошибок.Его внешний вид определяется UA,
и может зависеть от платформы. Часто это подчеркивается красной волнистой линией.
грамматическая ошибка
Это значение указывает тип оформления текста
используется пользовательским агентом для выделения грамматических ошибок.
Его внешний вид определяется UA,
и может зависеть от платформы. Это часто отображается как зеленая волнистая линия подчеркивания.
Примечание. В режимах вертикального письма положение подчеркивания текста может привести к смещению сторон подчеркивания и подчеркивания.Это позволяет расположить подчеркивание, чтобы отключить языковые предпочтения.
автоматически.
Поскольку украшения орфографических и грамматических ошибок полностью определяются UA,
UA может игнорировать другие подсвойства text-decoration,
а также любые другие свойства, обычно влияющие на внешний вид линий.
(например, положение подчеркивания текста, цвет, обводка или заливка)
при отрисовке этих украшений. Однако,
в той мере, в какой уважение любого из этих свойств
было бы значимым и практичным
учитывая выбранную пользователем визуализацию,
UA должен применять их
как модификации его стиля по умолчанию.
2.2. Стиль оформления текста: свойство
стиля оформления текста.
Это свойство,
которое является подсвойством сокращения text-decoration,
устанавливает стиль рисования линий подчеркивания, надчеркивания и сквозных линий
указан в элементе с text-decoration-line,
и влияет на все украшения, происходящие из этого элемента
даже если в дочерних блоках указан другой стиль.
Значения имеют то же значение, что и свойства стиля границы [CSS-BACKGROUNDS-3]. wavy обозначает волнистую линию.
2.3. Цвет оформления текста: свойство
цвета оформления текста
Это свойство,
которое является подсвойством сокращения text-decoration,
устанавливает цвет подчеркивания, надстрочного и сквозного перехода
указан в элементе с text-decoration-line,
и влияет на все украшения, происходящие из этого элемента
даже если в дочерних полях указан другой цвет.
2.4. Толщина линии оформления текста: свойство
толщины-украшения-текста ✔ MDN
толщина текстового декора
Во всех современных двигателях.
Firefox70 + Safari12.1 + Chrome87 +
Opera73 + Edge87 + Edge (устаревшая версия) None IENone Firefox для Android Нет iOS Safari12.2 + Chrome для Android87 + Android WebView87 + Интернет Samsung Нет Opera Mobile Нет
Это свойство,
которое является подсвойством сокращения text-decoration,
устанавливает толщину обводки подчеркиваний, надстрочных и сквозных линий
указан в элементе с text-decoration-line,
и влияет на все украшения, происходящие из этого элемента
даже если в дочерних полях указана другая толщина.
Значения имеют следующие значения:
авто
UA выбирает подходящую толщину для линий оформления текста;
см. ниже.
от-шрифт
Если первый доступный шрифт имеет
показатели, указывающие предпочтительную ширину подчеркивания,
используйте эту ширину,
в остальном ведет себя как авто.
<длина>
Задает толщину линий оформления текста как фиксированную длину.UA должен ограничить фактическое значение одним пикселем устройства.
Примечание: длина наследуется как фиксированное значение,
и не будет масштабироваться вместе со шрифтом.
<процент>
Определяет толщину линий оформления текста в процентах от 1em.
UA должен ограничить фактическое значение одним пикселем устройства.
Примечание. Процент наследуется как относительное значение,
и поэтому будет масштабироваться вместе с изменениями шрифта по мере его унаследования.
2.4.1. Автоматическая толщина линий оформления текста
Некоторые форматы шрифтов (например, OpenType) могут содержать информацию
о подходящей толщине линии украшения.
UA должен использовать такую информацию на основе шрифтов
при выборе автоматической толщины линии
везде, где это возможно.
2,5. Определение положения и толщины декоративных линий
Этот раздел скопирован из ранних черновиков Уровня оформления текста 3.
Он все еще находится на рассмотрении и нуждается в интеграции с text-underline-offset и text-decoration-Thickness.
Поскольку линейные украшения могут охватывать элементы с различными размерами шрифта и
вертикальные выравнивания, лучшее положение для линейного украшения - не
обязательно идеальное положение, продиктованное украшением коробки. Вместо этого он рассчитывается для каждой строки из всего текста, украшенного рамкой для украшения в этой строке, считается текстом .
Однако потомки украшения коробки, которые пропускаются из-за пропуска текста-декорации,
потомок встроен с текстом-декорацией-пропуском: чернила,
и любые потомки, которые не участвуют во встроенном контексте форматирования блока украшения
исключаются из множества рассматриваемого текста.
Затем рассчитываются позиции оформления линий.
на строку
следующим образом
(обработка чрезмерно расположенных подчеркиваний как надстрочных
и нижние верхние линии как нижние строки):
по линиям
Выровняйте декоративный элемент линии относительно самого высокого края EM-box
рассматриваемого текста.
буквенное подчеркивание
Положение подчеркивания алфавита рассчитывается следующим образом:
идеальное смещение (от алфавитной базовой линии) каждого прогона рассматриваемого текста,
усредняя их, а затем используя самую низкую буквенную базовую линию для фактического позиционирования линии. (Алфавитные базовые линии могут отличаться между блоками, выровненными по базовой линии
если доминирующая базовая линия не буквенная.)
Чтобы верхние и нижние индексы не сбивали эту позицию с толку,
встроенный с не начальным вычисленным вертикальным выравниванием рассматривается как имеющий идеальное положение подчеркивания своего родителя.
без букв под чертой
Расположите декоративный элемент линии относительно самого нижнего края EM-box
рассматриваемого текста.
сквозных
В сквозных строках используется тот же тип усреднения, что и для буквенного подчеркивания,
но пересчитать позицию при рисовании через потомка с другим вычисленным размером шрифта.(Это гарантирует, что текст остается фактически «перечеркнутым», несмотря на любые изменения размера шрифта.)
Для каждого прогона рассматриваемого текста с одинаковым размером шрифта
вычислить идеальную позицию, усредненную по метрикам шрифта.
Чтобы верхние и нижние индексы не сбивали эту позицию с толку,
встроенный с не начальным вычисленным вертикальным выравниванием рассматривается как имеющий идеальное положение подчеркивания своего родителя. Расположите часть линии поперек каждого украшенного фрагмента в этой позиции.
Для простоты сквозные линии должны проходить по каждому элементу в предпочтительной / средней позиции этого элемента.
Это может вызвать нежелательную нервозность,
но похоже, что нет способа избежать того, что является правильным во всех случаях,
и все попытки тревожно сложны.
Какую позицию должны занимать сквозные линии над элементами с другим размером шрифта,
а не обдуманный текст?
CSS не определяет толщину оформления линий.При определении толщины линий оформления текста
пользовательские агенты могут учитывать размер шрифта, начертание и вес потомков
чтобы обеспечить надлежащим образом усредненную толщину.
На следующем рисунке показано усреднение для подчеркивания:
В трех фрагментах подчеркнутого текста проводится подчеркивание
последовательно ниже и толще, как отношение большого текста к мелкому
текст увеличивается.
Используя тот же пример, сквозная строка во втором фрагменте,
вместо усреднения двух размеров шрифта,
разделите сквозную линию на два сегмента:
Однако в обоих случаях верхний индекс из-за сдвига вертикального выравнивания
не влияет на положение строки.
Это свойство является сокращением для установки строки-украшения-текста, толщины-украшения-текста, стиля-украшения-текста,
и текст-украшение-цвет в одном объявлении.
Пропущенные значения устанавливаются на их начальные значения.
Примечание. Объявление текстового оформления, в котором отсутствует
оба значения text-decoration-color и text-decoration-style
имеет обратную совместимость с CSS уровней 1 и 2.
В следующем примере непосещенные ссылки подчеркнуты сплошным синим цветом.
подчеркивание в UA CSS1 и CSS2 и подчеркивание темно-синим пунктиром в UA CSS3.
ссылка {
цвет синий;
текст-оформление: подчеркивание;
оформление текста: темно-синяя пунктирная линия; / * Игнорируется в UA CSS1 / CSS2 * /
}
Примечание. В сокращении намеренно опущено свойство text-underline-position,
это настройка, зависящая от языка / системы письма, которая позволяет отключать контент,
так что он может каскадировать и наследовать независимо
из (ненаследственных) стилистических настроек стенографического оформления текста.
2.7. Text Underline Position: свойство text-underline-position
Это свойство,
который является , а не подсвойством сокращения text-decoration,
устанавливает положение подчеркивания по отношению к тексту,
и определяет его нулевую позицию для дальнейшей настройки с помощью text-underline-offset.Он влияет на все украшения, происходящие из этого элемента,
даже если в дочерних полях указано другое положение.
Это не влияет на подчеркивания, указанные родительскими элементами.
В следующем примере стили современного китайского, японского и корейского языков.
тексты с соответствующими положениями подчеркивания по горизонтали
и вертикальный текст:
Если указано только left или right, подразумевается также auto.Значения имеют следующие значения:
авто
Пользовательский агент может использовать любой алгоритм для определения
положение подчеркивания; однако он должен быть размещен на или под
алфавитный базовый уровень.
Примечание. Рекомендуется, чтобы позиция подчеркивания по умолчанию
быть близко к алфавитной базовой линии,
если это не приведет к пересечению текста с нижним индексом (или иного понижения)
или нарисуйте глифы из азиатских шрифтов, таких как ханьский или тибетский
для которых буквенное подчеркивание слишком велико:
в таких случаях смещение подчеркивания ниже
или выравнивание по краю EM-бокса, как описано ниже, может быть более подходящим.
Типичное «буквенное» подчеркивание располагается чуть ниже буквенной базовой линии
от-шрифт
Если первый доступный шрифт имеет
показатели, указывающие предпочтительное смещение подчеркивания,
используйте это смещение,
в остальном ведет себя как авто.
под
Подчеркивание располагается под под текстовым содержанием элемента. В этом случае подчеркивание обычно не пересекает нижние элементы.(Это иногда называют «бухгалтерским» подчеркиванием.)
Это значение можно комбинировать с левым или правым, если конкретная сторона предпочтительнее в вертикальных типографских режимах.
Поскольку положение подчеркивания текста наследуется и не сбрасывается
сокращенно text-decoration следующий пример
переключает документ на использование с подчеркиванием, что может
быть более подходящим для систем письма с длинными, сложными
спусковые устройства. Это также часто полезно для математических или химических
тексты, в которых используется много нижних индексов.
: корень {положение-подчеркивания-текста: ниже; }
Примечание: заниженное значение не гарантирует
подчеркивание не будет конфликтовать с глифами,
поскольку у некоторых шрифтов есть нисходящие символы или диакритические знаки
которые простираются ниже метрик спуска шрифта.
слева
В вертикальных типографских режимах подчеркивание выравнивается так же, как и нижнее, за исключением того, что оно всегда выравнивается по левому краю текста. Если это приводит к тому, что подчеркивание будет нарисовано на "верхней" стороне
текст, затем линия также переключает стороны и рисуется на
сторона "снизу".
правая
В вертикальных типографских режимах подчеркивание выравнивается так же, как и нижнее, за исключением того, что оно всегда выравнивается по правому краю текста.
Если это приводит к тому, что подчеркивание будет нарисовано на "верхней" стороне
текст, затем линия также переключает стороны и рисуется на
сторона "снизу".
В вертикальных типографских режимах значения позиции подчеркивания текста слева и справа позволяют разместить подчеркивание на любом
сторона текста.(В горизонтальных типографских режимах оба значения
трактуется как авто.)
2,8. Смещение подчеркивания текста: свойство
смещения подчеркивания текста "> ✔ MDN
смещение подчеркивания текста
Во всех современных двигателях.
Firefox70 + Safari12.1 + Chrome87 +
OperaNoneEdge87 + Edge (устаревшая версия) None IENone Firefox для Android Нет iOS Safari12.2 + Chrome для Android87 + Android WebView87 + Интернет Samsung Нет Opera Mobile Нет
Это свойство,
который является , а не подсвойством сокращения text-decoration,
устанавливает смещение подчеркиваний от их нулевого положения.Положительные смещения представляют собой расстояния от текста;
отрицательные смещения внутрь.
Он влияет на все украшения, происходящие из этого элемента,
даже если в дочерних полях указано другое положение.
Это не влияет на подчеркивания, указанные родительскими элементами.
Значения имеют следующие значения:
9 2017 авто
UA выбирает соответствующее смещение для подчеркивания.
Однако это смещение должно быть нулевым.
если был указан from-font
и UA смог извлечь подходящую метрику для использования
от шрифта.
<длина>
Задает смещение подчеркивания как фиксированную длину.
Примечание: длина наследуется как фиксированное значение,
и не будет масштабироваться вместе со шрифтом.
<процент>
Задает смещение подчеркивания в процентах от 1em.
Примечание. Процент наследуется как относительное значение,
и поэтому будет масштабироваться вместе с изменениями шрифта по мере его унаследования.
Когда значение свойства text-decoration-line равно орфографической или грамматической,
UA может игнорировать значение text-underline-position.
2.8.1. Смещение подчеркивания исходной точки (нулевое положение)
Нулевая позиция подчеркивания
зависит от значения text-underline-position, как описано ниже.
Подчеркивание выравнивается по внешней стороне указанной позиции
(увеличивая его толщину только в положительном направлении).
Все автоматические настройки, сделанные для размещения потомков, сохраняются;
text-underline-offset является дополнением к ним.
2.8.2. Использование параметров шрифта для автоматического позиционирования
Некоторые форматы шрифтов (например, OpenType) могут содержать информацию
о правильном положении линейного украшения.
UA должен использовать такую информацию на основе шрифтов
в выборе автоматического смещения
где необходимо,
и должен использовать такую информацию
когда from-font указан для text-underline-position.
Примечание. Обычно метрики шрифта OpenType указывают позицию
буквенного подчеркивания;
в некоторых случаях (особенно в шрифтах CJK),
это дает положение нижнего подчеркивания слева.
(В этом случае показатели подчеркивания шрифта обычно
прикоснитесь к нижнему краю поля em).
UA может, но не обязан, исправлять неверные метрики шрифта.
2.9. Однородность линии оформления текста
Точное положение и толщина линий декора
зависит от значений text-underline-position, text-underline-offset и text-decoration-width, как определено выше,
и в остальном UA-определен.Однако для подчеркивания и подчеркивания
UA должен использовать одну толщину и позицию на каждой линии
для украшений, происходящих из одной коробки для отделки .
vs.
Правильный и неправильный рендеринг AB C D
Обратите внимание, поскольку оформление строк может охватывать элементы с разными размерами шрифта и
вертикальные выравнивания, лучшее положение для линейного украшения - не
обязательно идеальное положение, продиктованное коробкой для украшения . Например, надчеркнутый мелкий шрифт
фактически станет сквозной строкой, если элемент содержит текст со значительно большим размером шрифта.
Даже для подчеркивания, если текст не выровнен по алфавитной базовой линии
(например, в стилях вертикального набора,
текст по умолчанию выравнивается по центральной базовой линии [CSS-WRITING-MODES-4])
подчеркивание прорежет текст-потомок большего размера шрифта.
Таким образом, учет дочернего контента UA приведет к лучшей типографике.
Из-за выравнивания вертикального текста по центру базовой линии,
левое подчеркивание на небольшом вертикальном тексте прорезает текст
ребенка с большим размером шрифта.
Подчеркивание не допускается,
но изменяя свое положение левее
правильно вмещает весь подчеркнутый текст.
UA должен отрегулировать положение линии
чтобы соответствовать смещенным метрикам украшающих коробок сдвинутым
со значениями вертикального выравнивания, отличными от baseline [CSS2] или с нижним / верхним индексом через font-variant-position [CSS-FONTS-3],
но не должен регулировать положение линии или толщину
в ответ потомкам украшающей коробки , которые так стилизованы
(хотя он может отрегулировать положение
для размещения потомков, которые не имеют такого стиля,
например, те, которые просто набраны другим размером шрифта, как указано выше). Это позволяет правильно оформить надстрочные и подстрочные индексы.
(подчеркнуты, зачеркнуты и т. д.)
но мешает им исказить или нарушить расположение таких украшений на своих предках.
Пример подчеркивания, примененного к надстрочному тексту по сравнению с подчеркиванием, примененным к тексту, содержащему надстрочный индекс
2.10. Непрерывность линии оформления текста: сокращение text-decoration-skip и его вспомогательные свойства
⚠ MDN
текст-украшение-пропустить
Только в одном текущем двигателе.
Firefox Нет Safari12.1 + Chrome57–64
Opera44–50Edge Нет Edge (устаревшая версия) None IENone Firefox для Android Нет iOS Safari 12. 2 + Chrome для Android 57–64 Android WebView 57–64 Samsung Internet7.0–9.0 Opera Mobile 43–46
CSSWG решила разделить функцию пропуска на отдельные свойства.
по линиям текст-украшение-пропустить-чернила,
чтобы улучшить его каскадное поведение.
См. Обсуждение и решение.
Этот раздел является черновым вариантом и еще не прошел проверку Рабочей группой CSS
.
Свойство text-decoration-skip и его вложенные свойства
(текст-украшение-пропустить-сам, текст-украшение-пропустить-поле, текст-украшение-пропустить-вставку, текст-украшение-пропускать-пробелы, текст-украшение-пропустить-чернила)
контролировать прерывания в оформлении линии
для которого элемент или предок является украшающей коробкой.Значение none устанавливает для всех вложенных свойств значение none,
и авто значение
устанавливает для всех вложенных свойств их начальные значения.
Совместимо ли это определение с Интернетом?
Нужно ли нам также добавлять значение рукописного ввода для веб-совместимости?
Обратите внимание, что эти свойства наследуют
и у дочерних элементов могут быть разные настройки.
В таблицу стилей UA по умолчанию для HTML по умолчанию внесено следующее дополнение:
ins, del {text-decoration-skip: none;}
Когда значение свойства text-decoration-line равно орфографической или грамматической,
UA может игнорировать любое или все эти свойства.
CSSWG решила разделить текст-украшение-пропуск на подсвойства,
но этот набор значений еще не был проверен CSSWG.
Это свойство указывает,
любые линии оформления текста, нарисованные его предками
распространяются на элемент или рисуются поперек него.
Значения имеют следующие значения:
нет
Ничего не пропускать: линейные украшения из предков, украшающих коробки, переносятся на этот прямоугольник или рисуются поперек него, в зависимости от ситуации.
объектов
Пропустить этот элемент (весь его поле поля), если это атомарный встроенный
(например, изображение или встроенный блок).
CSSWG решила разделить текст-украшение-пропуск на подсвойства,
но этот набор значений еще не был проверен CSSWG.
Это свойство указывает, какие части области рамки элемента
любое текстовое оформление, влияющее на элемент, должно пропускаться.Он управляет только линиями оформления текста, нарисованными его предками.
Значения имеют следующие значения:
нет
Ничего не пропускать: линейные украшения из предшествующих рамок рисуются от края поля до края поля.
все
При рисовании линий оформления текста, применяемых к рамке-предку,
пропустить собственные поля, границы и отступы поля
и рисовать линии только внутри области содержимого.
Это значение влияет только на украшения, наложенные предком;
коробка для украшения никогда не перекрывает собственное украшение коробки.
CSSWG решила разделить текст-украшение-пропуск на подсвойства,
но этот набор значений еще не был проверен CSSWG.
Это свойство указывает, какие части области рамки элемента
любое текстовое оформление, влияющее на элемент, должно пропускаться.Он контролирует все линии оформления текста, нарисованные элементом,
но не любые линии оформления текста, нарисованные его предками.
Значения имеют следующие значения:
нет
Ничего не пропустить: оформление текста рисуется от края до края блока.
авто
UA должен немного повернуть начало и конец линии внутрь
от края содержимого коробки для украшения так, чтобы,
например два подчеркнутых элемента рядом друг с другом не имеют единого подчеркивания. Размер вставки зависит от User Agent.
(например, половина толщины линии)
но не должно быть нулевым.
(Это важно для китайского языка, где подчеркивание - это форма пунктуации.)
Это может быть отдельное свойство, а не часть набора text-decoration-skip.
См. Также Issue 4557,
о явном контроле длины строки.
2.10.4. Пропуск пробелов: свойство
text-decoration-skip-space
Должно быть начальное значение none для Web-compat?
Если нет, то в таблице стилей UA по умолчанию как минимум не должно быть присвоено ни одного INS и DEL.См. Также ошибку 4653.
.
Это свойство указывает, пропускает ли текстовое оформление какие-либо пробелы.
Он контролирует все линии оформления текста, нарисованные элементом.
а также любые линии оформления текста, нарисованные его предками.
Значения имеют следующие значения:
нет
Проставки не пропускаются. Они оформлены так же, как и любой другой персонаж.
все
Пропустить все распорки,
плюс любой соседний межбуквенный или межсловный интервал.
начало
Пропустить все распорки,
плюс любой соседний межбуквенный или межсловный интервал,
когда находится в начале строки.
конец
Пропустить все распорки,
плюс любой соседний межбуквенный или межсловный интервал,
когда находится в конце строки.
Для целей данного имущества:
проставка любой типографский символьный блок со свойством Unicode White_Space [UAX44], кроме U + 202F NARROW NO-BREAK SPACE,
или любой разделитель слов.
Opera50 + Edge79 + Edge (устаревшая версия) None IENone Firefox для Android Нет iOS Safari Нет Chrome для Android 64 + Android WebView64 + Samsung Internet9.0 + Opera Mobile46 +
Это свойство определяет способ прорисовки надстрочных и подчеркиваемых линий.
когда они пересекают глиф.
Когда этот параметр включен, декоративные линии пропускаются там, где нарисованы глифы:
прервать декоративную линию, чтобы видна форма текста
где текстовое оформление в противном случае пересекало бы глиф.
UA также должен пропустить небольшое расстояние по обе стороны от контура глифа.
Пропуск чернил символов
Идеографические скрипты не хотят пропускать при авто.
Как мы можем определить это поведение?
Есть еще скрипты, которые не нужно пропускать?
Нужен нормативный текст, описывающий, как работает авто. См. Протокол Telcon, alreq # 86, csswg # 1288
Это свойство применяется только к надстрочным и подчеркнутым чертам;
сквозные линии всегда непрерывны.
авто
UA может прерывать подчеркивание и наложение
где линия будет пересекать чернила глифа
и на некотором расстоянии по обе стороны от контура глифа.
UA должен учитывать сценарий текста (см. Примечание ниже)
при определении, применять ли режим пропуска чернил к заданному
диапазон содержания.
все
UA должен прерывать подчеркивание и наложение
где линия будет пересекать чернила глифа
и на некотором расстоянии по обе стороны от контура глифа.
нет
UA должен наносить непрерывные подчеркивания и надстрочные линии,
без перерывов, когда они пересекают глиф.
Примечание. Опыт внедрения показывает, что пропуск чернил часто
приводит к нежелательным результатам, если подчеркнутый текст содержит идеографические символы,
в качестве позиции подчеркивания (в зависимости от используемого шрифта и пользовательского агента)
часто сталкивается практически со всеми символами,
таким образом, что остаются только отдельные фрагменты линии.
В принципе, это могло быть решено авторами с помощью text-underline-position: under (или, возможно, text-underline-offset)
чтобы переместить подчеркивание в нижнее положение, которое не конфликтует с глифами,
но это не всегда возможно, даже если пользовательский агент поддерживает эти свойства
и автор осознает их потенциал.
В частности, когда страница содержит произвольный пользовательский контент,
автор, ответственный за дизайн, может не знать, будет ли присутствовать контент CJK.А со смешанным содержанием
положение подчеркивания, предназначенное для работы с контентом CJK
может выглядеть плохо, если большая часть текста написана не на основе CJK.
Следовательно, когда действует авто,
UA, который реализует пропуска чернил, должен воздерживаться от этого в контекстах CJK.
(Авторы, которые с по хотят, чтобы к контенту CJK применялся пропуск чернил, могут использовать
значение always для явного запроса.)
В первую очередь это означает, что , а не , применяет пропуск чернил для символов, чьи
Свойство скрипта Unicode - это любой из скриптов CJK Han, Hiragana, Katakana, Bopomofo или Hangul,
или для персонажей, свойство Script которых имеет значение Inherited или Common,
и чье свойство ScriptExtensions включает один или несколько сценариев CJK.
Кроме того, символы со свойством сценария Unicode Common и Inherited
(в первую очередь общие знаки препинания и символы) необходимо учитывать,
поскольку они могут использоваться как часть запуска содержимого CJK-скрипта,
и желательно согласованно обрабатывать весь текст в рамках данного запуска скрипта. Следовательно, UA должен преобразовать текст в запуски сценария.
как описано в «Примечаниях к реализации» [UAX24] «Свойство сценария Unicode», в частности в подразделах 5.1 и 5.2.
После применения описанной эвристики (или аналогичного анализа скриптов),
UA должен отключить пропуск рукописного ввода для всех диапазонов текста
которые определены как скрипт CJK.
Есть ли другие (не CJK) скрипты, где было бы предпочтительнее?
для отключения пропуска чернил по умолчанию
(когда действует авто)?
Возможно Йи? Арабский?
(См. Также обсуждение в выпуске 1288.)
2.10.6. Прерывание формирования
Когда UA прерывает подчеркивание или наложение на границах глифа,
форма линии на этой границе должна
следуйте форме глифа.
Обратите внимание, что эта спецификация намеренно не требует определенного метода.
для «следования форме» глифа
чтобы UA могли принять соответствующие меры для обработки
эстетические и эксплуатационные соображения. Например,
UA может предполагать, что окончания квадратных линий ниже определенного порога размера
по соображениям производительности;
или используйте трапециевидные окончания для аппроксимации кривых,
особенно на украшениях с более тонкими линиями.
С точки зрения эстетики,
UA может также учитывать, что происходит, когда граница глифа
пересекает только часть толщины линии
или наклонен близко к горизонтали - точно следует по кривой
может привести к появлению типографически неудобных клочков подчеркивания.Показывать ли линию внутри замкнутых областей глифа еще
другое соображение.
Скрытие части подчеркивания внутри чаши придает более четкий вид шрифту,
в то время как изогнутые концы подчеркивания за его пределами
предложите непрерывность подчеркивания через букву
обнимая его внешний контур.
3. Дополнительные элементы управления для знаков выделения
В восточноазиатских документах традиционно используются маленькие символы рядом с каждым глифом, чтобы подчеркнуть
серия текста. Например:
Акцентный акцент (показан синим для ясности), примененный к японскому тексту
Сокращение выделения текста и его длинные символы стиля выделения текста и цвета выделения текста,
можно использовать для нанесения таких пометок на текст.
Свойство text-focus-position, которое наследуется отдельно,
позволяет установить положение акцентов по отношению к тексту.
См. Также вопрос о преемственности в размере / положении.
3.1. Стиль акцента: свойство
стиля выделения текста
Это свойство применяет знаки выделения к тексту элемента.Значения имеют следующие значения:
нет
Без упора.
заполнено
Форма залита сплошным цветом.
открыто
Форма полая.
точка
Отобразите маленькие кружки как отметки.
Закрашенная точка - это U + 2022 '•', а открытая точка - U + 25E6 '◦'.
круг
Отобразить большие круги как отметки.Закрашенный кружок - это U + 25CF '●', а белый кружок - U + 25CB '○'.
двойной круг
Отобразить двойные кружки как отметки.
Закрашенный двойной круг - это U + 25C9 '', а открытый двойной круг - это U + 25CE ''.
треугольник
Отобразить треугольники как метки.
Закрашенный треугольник - это U + 25B2 '▲', а открытый треугольник - это U + 25B3 '△'.
кунжут
Кунжуты отображать в виде знаков. Кунжут с начинкой - U + FE45 '', а открытый кунжут - U + FE46 ''.
<строка>
Отобразить данную строку в виде меток.
Авторы не должны указывать более одного символа в .
UA может обрезать или игнорировать строки, состоящие более чем из одного кластера графем.
Если ключевое слово формы указано, но ни заполнено, ни открыто
указано, заполнено предполагается. Если указано только заполненное или открытое,
ключевое слово shape вычисляет круг в горизонтальных типографских режимах и кунжут в вертикальных типографских режимах.
Метки должны быть нарисованы с использованием настроек шрифта элемента.
с добавлением рубина
и размер уменьшился на 50%.
Однако, поскольку не все шрифты имеют все эти глифы,
и некоторые шрифты используют неподходящие размеры для выделения знаков в этих кодовых точках,
UA может выбрать использование шрифта, который, как известно, подходит для выделения знаков,
или вместо этого метки могут быть синтезированы UA. Метки должны оставаться вертикальными в вертикальных типографских режимах:
как и символы CJK, они не поворачиваются в соответствии с режимом письма.Ориентация меток в горизонтальных типографских режимах или вертикальных режимах письма на этом уровне не определена.
(но может быть определено на будущем уровне, если возникнут определенные варианты использования).
Примечание. Одним из примеров хороших шрифтов для выделения акцентов является шрифт Adobe Kenten Generic OpenType с открытым исходным кодом,
который специально разработан для выделения знаков.
Знаки наносятся один раз для каждой единицы типографских знаков.
Тем не менее, выделенные метки , а не , нарисованные для:
Разделители слов или другие символы, которые
принадлежат к классам разделителей Unicode (Z *).(Но обратите внимание, что акцентные знаки - это , нарисованные для пробела
который сочетается с любыми комбинированными символами.)
Пунктуация - в частности,
любые персонажи, принадлежащие
Unicode P * общая категория и
не NFKD нормализовать [UAX15] в
любой из следующих символов:
#
U + 0023
НОМЕРНЫЙ ЗНАК
%
U + 0025
ЗНАК ПРОЦЕНТ
‰
U + 2030
ЗНАК НА МИЛЬ
‱
U + 2031
НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
٪
U + 066A
Арабский знак процента
؉
U + 0609
АРАБСКИЙ ИНДИКАТОР НА ЗНАК
؊
U + 060A
АРАБСКИЙ ИНДИК НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
и
U + 0026
АМПЕРСАНД
⁊
U + 204A
ТИРОНИАНСКИЙ ЗНАК ET
@
U + 0040
КОММЕРЧЕСКИЙ АТ
§
U + 00A7
РАЗДЕЛ ЗНАК
¶
U + 00B6
ЗНАК PILCROW
⁋
U + 204B
ПЕРЕВЕРНУТЫЙ ЗНАК PILCROW
⁓
U + 2053
SWUNG DASH
〽
U + 303D
ДЕТАЛИ ЗАМЕТКА ЗАМЕНА
Символы, принадлежащие классам Unicode для управляющих кодов
и неназначенные символы (Cc, Cf, Cn).
Примечание. Контроль над помеченными символами будет добавлен на уровне 4.
(Список знаков препинания также может быть уточнен,
особенно для знаков препинания, отличных от CJK.)
3.2. Цвет акцента: свойство
цвета выделения текста
Это свойство определяет цвет переднего плана для меток выделения.
Примечание: ключевое слово currentcolor вычисляет само
и преобразуется в значение цвета после выполнения наследования.
Это означает, что цвет текста по умолчанию соответствует цвету текста даже при изменении цвета элементов.
3.3. Акцентный знак, сокращенный: свойство выделения текста
Это свойство является сокращением для установки стиля выделения текста и цвета выделения текста в одном объявлении.
Пропущенные значения устанавливаются на их начальные значения.
Обратите внимание, что положение выделения текста не сбрасывается в этом
стенография. Это потому, что обычно форма и цвет различаются, но
позиция соответствует определенному языку во всем документе.
Поэтому положение должно наследоваться независимо.
3.4. Позиция акцента: свойство
позиции выделения текста
Это свойство описывает, где ставятся метки выделения.
Если [право | left] опускается, по умолчанию используется right.
Значения имеют следующие значения:
более
Нарисуйте отметки над текстом в горизонтальных типографских режимах.
под
Нарисовать метки под текстом в горизонтальных типографских режимах.
правая
Нарисуйте метки справа от текста в вертикальных типографских режимах.
слева
Нарисуйте метки слева от текста в вертикальных типографских режимах.
Знаки акцента нарисованы точно так, как если бы каждый символ был
назначил метку в качестве текста аннотации рубина с положением рубина
задано текстовым акцентом и выравниванием рубина по центру.
Обратите внимание, что это положение может быть изменено, если оно противоречит
с подчеркиванием или надводным орнаментом.
Эффект выделения знаков на высоту строки такой же, как и для
рубиновый текст.
Обратите внимание, что предпочтительное положение акцентов зависит от
язык. Например, в японском языке предпочтительная позиция - сверху справа. В китайском же, напротив, предпочтительный
позиция внизу справа.
В информационной таблице ниже приведены предпочтительные
Положения курсора для китайского и японского:
Предпочтительный акцент и положение рубина
Язык
Предпочтительная позиция
Иллюстрация
По горизонтали
Вертикальный
Японский
более
правая
Корейский
монгольский
китайский
под
справа
Если к символам применены знаки выделения
рубин нарисован в том же месте, что и акцент,
акценты расположены за пределами рубина.Сюда входят автоматически скрытые и пустые рубиновые аннотации.
Курсивные знаки, нанесенные на 4 символа, с рубином также на 2 из них
Некоторые редакторы предпочитают скрывать метки выделения, когда они конфликтуют с рубином.
В HTML это можно сделать с помощью следующего правила стиля:
рубин {выделение текста: нет; }
Некоторые другие редакторы предпочитают скрывать рубин, если они противоречат знакам выделения.
В HTML это можно сделать с помощью следующего шаблона:
em {выделение текста: точка; } / * Устанавливаем выделение текста для элементов * /
em rt {дисплей: нет; } / * Скрываем рубин внутри элементов * /
3.5. Выделение Mark Skip: свойство
выделения текста.
Этот раздел находится в стадии мозгового штурма.
Также еще не ясно, необходимо ли это свойство, несмотря на различия в желаемом поведении среди публикаций.
Это свойство описывает, для каких знаков рисуются метки.
Значения имеют следующие значения:
мест
Пропускать разделители слов или другие символы, относящиеся к категории разделителей Unicode (Z *).(Но обратите внимание, что акцентные знаки - это , нарисованные для пробела
который сочетается с любыми комбинированными символами.)
пунктуация
Пропустить знаки препинания.
Пунктуация в этом определении включает символы, принадлежащие
категория Unicode P *
которые не определены как символы (см. ниже).
символов
Пропустить символы.
Символы в этом определении включают
все типографские символы, принадлежащие
общая категория Unicode S *, а также любые символы, эквивалентные NFKD [UAX15] следующим символам из категории Unicode Po:
#
U + 0023
НОМЕРНЫЙ ЗНАК
%
U + 0025
ЗНАК ПРОЦЕНТ
‰
U + 2030
ЗНАК НА МИЛЬ
‱
U + 2031
НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
٪
U + 066A
Арабский знак процента
؉
U + 0609
АРАБСКИЙ ИНДИКАТОР НА ЗНАК
؊
U + 060A
АРАБСКИЙ ИНДИК НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
и
U + 0026
АМПЕРСАНД
⁊
U + 204A
ТИРОНИАНСКИЙ ЗНАК E [[
@
U + 0040
КОММЕРЧЕСКИЙ АТ
§
U + 00A7
РАЗДЕЛ ЗНАК
¶
U + 00B6
ЗНАК PILCROW
⁋
U + 204B
ПЕРЕВЕРНУТЫЙ ЗНАК PILCROW
⁓
U + 2053
SWUNG DASH
〽️
U + 303D
ДЕТАЛИ ЗАМЕТКА ЗАМЕНА
узкий
Пропускайте символы, если свойство East_Asian_Width [UAX11] базы данных Unicode [UAX44] не равно F (полная ширина) или W (широкая).
Символы, принадлежащие классам Unicode для управляющих кодов
и неназначенные символы (Cc, Cf, Cn) пропускаются
независимо от стоимости этого свойства.
Этот синтаксис требует, чтобы UA реализовал рисование меток для пробелов.
Есть ли для этого какой-нибудь вариант использования?
Если нет, должны ли мы изменить синтаксис, чтобы не позволять рисовать метки для пробелов?
См. Также обсуждение начального значения.
4. Text Shadows: свойство text-shadow
Это свойство принимает список теневых эффектов, разделенных запятыми.
для применения к тексту элемента.Значения интерпретируются как тень блока [CSS-BACKGROUNDS-3].
(Но обратите внимание, что ключевое слово inset недопустимо.)
Каждый слой затеняет текст элемента и все его текстовые украшения.
(собраны вместе).
Если цвет тени не указан,
по умолчанию это currentColor,
т.е. цвет тени берется из свойства цвета элемента.
Эффекты тени применяются спереди назад:
первая тень сверху.
Таким образом, тени могут накладываться друг на друга,
но они никогда не перекрывают сам текст.Тень должна быть нарисована на уровне стека.
между границей элемента и / или фоном (если есть)
а также элементы текста и оформления текста.
UA следует избегать рисования теней текста поверх текста
в смежных элементах, принадлежащих к одному уровню стека и контексту стекирования.
(Это может означать, что точный уровень стека теней зависит от
от того, есть ли у элемента граница или фон:
Таким образом, точное наложение текстовых теней определяется UA.)
Не определено, затеняет ли данный теневой слой
каждый глиф или украшение независимо
или если текст и / или украшения сглаживаются, а затем затемняются.
В отличие от box-shadow, текстовые тени не обрезаются по затененной форме.
и может просвечивать, если текст частично прозрачен.
Как и box-shadow, текстовые тени не влияют на макет,
и не запускать прокрутку
или увеличьте размер прокручиваемой области переполнения.
Также в отличие от box-shadow,
расстояние распространения строго интерпретируется как исходное расстояние
из любой точки контура глифа,
и поэтому, как и радиус размытия,
создает закругленные, а не острые углы.
Примечание: порядок рисования теней, определенный здесь, противоположен
того, что определено в Рекомендации CSS2 1998 г.
Свойство text-shadow применяется как к псевдоэлементам :: first-line , так и к :: first-letter .
Уровень 4 добавляет аргумент радиуса распространения к текстовой тени,
используя тот же синтаксис и интерпретацию, что и для box-shadow,
кроме того, что углы всегда закруглены
(поскольку геометрия глифа не такая простая, как прямоугольник).
5. Оформление текста
5.1. Порядок написания украшений текста
Как и в [CSS2], текстовые украшения рисуются непосредственно над / под текстом, который они украшают,
в следующем порядке (сначала нижний):
Если линейные украшения нарисованы через украшения коробки или атомарные строчки,
они рисуются поверх непозиционированного контента и чуть ниже любых позиционированных потомков
(непосредственно под слоем № 8 в CSS2.1, приложение E).
5.2. Переполнение текстовых украшений
Текстовые украшения, выходящие за пределы коробки, считаются переполнением чернил:
они не расширяют прокручиваемую область переполнения. [css-overflow-3]
Приложение A: Благодарности
Эта спецификация была бы невозможна без помощи:
Айман Альдалех, Берт Бос, Тантек Челик, Стивен Дич, Джон Даггетт,
Мартин Дюрст,
Лори Анна Эдлунд, Бен Эррез, Янив Файнберг, Арье Гиттельман, Ян
Хиксон, Мартин Хейдра, Ричард Исида, Масаясу Исикава,
Майкл Йочимсен, Эрик Левин, Амброуз Ли, Хокон Виум Ли, Крис Лилли,
Кен Лунде, Нат Маккалли, Шинью Мураками, Пол Нельсон, Крис Пратли, Марчин Савицкий,
Арнольд Шрайвер, Рахул Соннад, Мишель Суиньяр, Такао Сузуки,
Фрэнк Танг, Крис Трэшер, Этан Векслер, Крис Уилсон, Масафуми Ябе
и Стив Зиллес.
Приложение B: Таблица стилей UA по умолчанию
Это приложение является информативным,
и призван помочь разработчикам UA реализовать таблицу стилей по умолчанию,
но разработчики UA могут игнорировать или изменять.
/ * типичный стиль HTML * /
blink {
текст-украшение-строка: мигать;
}
s, strike, del {
оформление текста: сквозное;
}
u, ins,: link,: посещено {
текст-оформление: подчеркивание;
}
abbr [название], аббревиатура [название] {
оформление текста: пунктирное подчеркивание;
}
/ * отключаем наследование меток выделения текста рубиновому тексту:
знаки выделения должны применяться только к основному тексту * /
rt {выделение текста: нет; }
/ * установка позиции акцента по умолчанию для соответствующего языка * /
: root: lang (zh), [lang | = zh] {положение выделения текста: внизу справа; }
[lang | = ja], [lang | = ko] {положение выделения текста: справа; }
/ * установить соответствующую языку позицию подчеркивания по умолчанию * /
: root: lang (ja), [lang | = ja],
: root: lang (mn), [lang | = mn],
: root: lang (ko), [lang | = ko] {положение подчеркивания текста: справа; }
: корень: язык (zh), [язык | = zh] {положение подчеркивания текста: слева; }
/ * auto выбрано (подразумевается) выше, а не ниже
из-за проблем с совместимостью контента * /
Если вы обнаружите какие-либо проблемы, рекомендации для добавления или исправления,
отправьте информацию по адресу www-style @ w3.org с [css-text-decor] в строке темы.
Хотя text-decoration-line: blink нельзя полностью воспроизвести с другими существующими свойствами,
авторы могут добиться очень похожего эффекта с помощью следующего CSS:
Изменения по сравнению с рабочим проектом от 13 марта 2018 г.
Дополнения с уровня 3
Следующие функции были добавлены с уровня 3:
6.Вопросы конфиденциальности и безопасности
Эта спецификация не вводит никаких новых соображений конфиденциальности или безопасности.
Требования к соответствию выражаются комбинацией
описательные утверждения и терминология RFC 2119. Ключевые слова «ДОЛЖНЫ»,
«НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН»,
«РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего
документ следует интерпретировать, как описано в RFC 2119.
Однако для удобства чтения эти слова не отображаются в верхнем регистре.
буквы в этой спецификации.
Весь текст данной спецификации является нормативным, кроме разделов
явно помечены как ненормативные, примеры и примечания. [RFC2119]
Примеры в этой спецификации представлены словами «например»
или выделяются отдельно от нормативного текста с помощью class = "example" ,
например:
Информационные примечания начинаются со слова «Примечание» и выделяются
нормативный текст с class = "note" , например:
Примечание, это информационное примечание.
Рекомендации - это нормативные разделы, призванные привлечь особое внимание.
отделяется от другого нормативного текста с помощью , например
это: UA ДОЛЖНЫ предоставлять доступную альтернативу.
Таблица стилей соответствует этой спецификации
если все его утверждения, которые используют синтаксис, определенный в этом модуле, действительны
в соответствии с общей грамматикой CSS и отдельными грамматиками каждого
функция, определенная в этом модуле.
Средство визуализации соответствует этой спецификации
если в дополнение к интерпретации таблицы стилей, как определено
соответствующие спецификации, он поддерживает все определенные функции
по этой спецификации, правильно проанализировав их
и соответствующим образом отрисовываем документ.Однако неспособность
UA для правильной визуализации документа из-за ограничений устройства
не делает UA несоответствующим. (Например, UA не
требуется для воспроизведения цвета на монохромном мониторе.)
Инструмент разработки соответствует этой спецификации
если он пишет таблицы стилей, которые синтаксически правильны в соответствии с
общая грамматика CSS и отдельные грамматики каждой функции в
этот модуль и соответствовать всем остальным требованиям соответствия таблиц стилей
как описано в этом модуле.
Чтобы авторы могли использовать правила прямого синтаксического анализа для
назначать резервные значения, средства визуализации CSS должны обрабатывать как недопустимые (и игнорировать
при необходимости) любые правила, свойства, значения свойств, ключевые слова,
и другие синтаксические конструкции, для которых у них нет пригодного уровня
поддержка. В частности, пользовательские агенты не должны выборочно игнорировать неподдерживаемые значения компонентов и соблюдать поддерживаемые значения в одном
объявление многозначного свойства: если какое-либо значение считается недопустимым
(поскольку должны быть неподдерживаемые значения), CSS требует, чтобы все объявление
игнорировать.
Когда спецификация достигает стадии кандидата в рекомендации,
возможны неэкспериментальные реализации, и разработчики должны
выпустить реализацию без префикса любой функции уровня CR, которую они
может продемонстрировать правильность реализации в соответствии со спецификацией.
Для установления и поддержания взаимодействия CSS через
реализациях, рабочая группа CSS просит, чтобы не экспериментальные
Средства визуализации CSS отправляют отчет о реализации (и, при необходимости,
тестовые наборы, использованные для этого отчета о реализации) в W3C до
выпуск реализации каких-либо функций CSS без префикса.Тестовые наборы
отправленные в W3C могут быть проверены и исправлены CSS.
Рабочая группа.
Дополнительная информация об отправке тестовых примеров и отчетов о реализации
можно найти на веб-сайте Рабочей группы CSS http://www.w3.org/Style/CSS/Test/.
Вопросы следует направлять в список рассылки [email protected].
Добавление контура к тексту с помощью CSS
С помощью CSS вы можете создавать свой текст разными способами. Вы можете добавить разные цвета, тени, подчеркивания или стилизовать его разными способами.В этом посте вы узнаете о различных методах добавления к тексту контура или обводки текста.
Мы рассмотрим два метода, с помощью которых вы можете добавить контуры к вашему тексту. Есть и третий, но в настоящее время он не поддерживается ни одним браузером.
Использование свойства text-stroke
Свойство text-stroke добавляет штрих к вашему тексту. Его можно использовать для изменения ширины и цвета текста. Это свойство поддерживается только браузерами на основе WebKit, а также при использовании префикса -webkit- .
HTML
Этот текст имеет обводку
CSS
# example1 {
цвет белый;
размер шрифта: 40 пикселей;
-webkit-text-stroke-width: 2px;
-webkit-текст-обводка-цвет: черный;
}
-webkit-text-stroke-width и -webkit-text-stroke-color определяет ширину и цвет штриха соответственно. Это два полных свойства для сокращенного свойства -webkit-text-stroke , которое одновременно определяет цвет обводки и ширину.Таким образом, приведенный выше код CSS эквивалентен приведенному ниже.
CSS
# example2 {
цвет белый;
размер шрифта: 40 пикселей;
-webkit-text-stroke: 2px черный;
}
Этот текст имеет штрих
Вы не сможете увидеть вышеуказанный текст, если ваш браузер не поддерживает свойство text-stroke , потому что он имеет белый цвет шрифта. Чтобы сделать текст видимым во всех этих браузерах, дайте ему любой цвет текста, кроме цвета фона, чтобы он стал видимым во всех браузерах, которые не поддерживают это свойство и используют -webkit-text-fill-color свойство, чтобы переопределить цвет текста во всех браузерах на основе WebKit.
HTML
Обводка текста не будет видна в некоторых браузерах
Обводка текста не будет видна в некоторых браузерах
Приведенный выше текст будет черным во всех браузерах, которые не поддерживают свойство text-transform . Для браузеров, которые поддерживают это свойство, -webkit-text-fill-color переопределяет черный цвет текста, чтобы сделать его белым.
Теперь давайте перейдем к другому методу, который можно использовать для добавления контуров к вашему тексту.
Использование свойства text-shadow
Поскольку text-stroke не имеет большой поддержки браузерами, вы можете использовать свойство text-shadow , которое имеет сравнительно большую поддержку браузерами.
В приведенной выше демонстрации четыре тени текста (верхний правый, нижний правый, нижний левый и верхний левый) задаются с установкой радиуса размытия 0.Этот эффект аналогичен тому, который дает первый метод.
Этот метод имеет дополнительное преимущество. Мы можем настроить горизонтальные и вертикальные тени в соответствии с тем, что подходит к тексту. Добавление небольшого радиуса размытия также придаст ему лучший вид, как в следующей демонстрации.
# example7 {
цвет белый;
размер шрифта: 47 пикселей;
-webkit-text-stroke: 3px # E21F03;
}
# example8 {
цвет белый;
размер шрифта: 47 пикселей;
-webkit-text-stroke: 5px # E21F03;
}
Обводка текста
Обводка текста
Приведенная выше демонстрация дает эффект тонкой белой линии, следующей по пути текста для первого текста, и изогнутого жирного шрифта для второго текста.Этого можно добиться, просто увеличив ширину штриха.
Это были классные эффекты, которые вы можете добавить к своему тексту, используя указанные выше свойства.Вы можете создать более красивые эффекты обводки текста, комбинируя и изменяя значения различных свойств, таких как цвет, радиус размытия, ширина обводки и т. Д.
Поддержка браузера
Как обсуждалось ранее, свойство text-stroke поддерживается браузерами на основе WebKit с префиксом -webkit- . Это поддерживается Chrome , Safari , Opera и Android . С другой стороны, text-shadow поддерживается почти всеми браузерами.
Существует также третье свойство text-outline для добавления контура к тексту, но в настоящее время оно не поддерживается ни одним браузером.
Заключение
Легкое прикосновение росчерка может придать вашему тексту живость. Хотя text-stroke служит цели, равномерно добавляя плавный контур, я предпочитаю использовать text-shadow из-за его хорошей поддержки браузером. Последний не предназначен для добавления контуров, но представляет собой очень хороший CSS-прием, который дает вам желаемый эффект.Более того, вы можете создать эффект размытия с помощью теней, которые могут добавить глубины вашему макету. Хотя text-shadow не дает хороших результатов, если длина тени больше 1 пикселя, вы всегда можете использовать комбинацию text-shadow и text-stroke .
На лазерном
принтере 1cm должен быть точно равен 1 сантиметру.
Но на устройствах низкого разрешения, вроде компьютерных экранов,
CSS этого не требует. И вправду, разные устройства и разные
реализации CSS норовят отобразить их по-разному. Лучше оставить эти
единицы для устройств высокого разрешения, в частности для печати.
На компьютерных экранах и мобильных устройствах может получиться
не то, что ожидалось.
Поэтому при печати
px не только одинаково выглядит независимо от устройства,
но и заведомо измеряется одной и той же величиной (совсем как
единицы 
перев.).
е. «корневой em» или «em корневого элемента») — это размер шрифта
корневого элемента в документе. В отличие от 
Если же вы хотите использовать все три варианта в разных параграфах, поступите следующим образом: задайте каждому параграфу уникальный ID (например, n, o, i) → задайте шрифт для всего текста:
По умолчанию установлен первый вариант, поэтому рассмотрим. как установить small-caps. Например:
exr{
font-stretch:ultra-expanded;
}
.cond{
font-stretch:ultra-condensed;
}
—>
</style>
</head>
<body>
<p>Это текст с обычной толщиной букв</p>
<p>Это текст с самой широкой толщиной букв</p>
<p>Это текст с самой узкой толщиной букв</p>
</body>
</html>Сделай код и жми тут
Для этого нужно присвоить ID каждому параграфу и “прописать” стиль для каждого из них:
Для этого нужно добавить в таблицу стилей несколько строк:
3em;
Переменные шрифты хранят все эти вариации в одном файле шрифта. В отличие от статических шрифтов, переменные шрифты предоставляют доступ ко всему диапазону ширины, толщины и других свойств. Например, большинство семейств шрифтов включают в себя заданное количество шрифтов с различной толщиной, доступное в инкрементальных значениях от 100 до 900. Переменные шрифты предоставляют возможность использовать любую толщину в пределах указанного диапазона. Так что, если font-weight: 470 идеально подходит для вашего сайта, вы можете использовать его.
Быстрый старт
В демонстрации ниже использует переменный шрифт Amstelvar, чтобы показать переход от низкого к высокому оптическому размеру. При больших размерах контраст увеличивается.
Есть пять зарегистрированных осей: weight, width, italic, slant и optical size. Каждая зарегистрированная ось имеет соответствующий четырехбуквенный тег и может быть сопоставлена с существующими свойствами CSS.
Спецификации CSS предпочитают использовать font-weight, font-stretch, font-style и font-optical-sizing для контроля зарегистрированных осей, где это возможно. Пользовательские оси могут быть доступны с помощью свойства font-variation-settings. В приведенном ниже примере GRAD — это пользовательская ось.
Например:
</p>
По умолчанию это свойство имеет значение normal.
Задавать размер шрифта в css возможно тремя способами:
8em;
thin {
текст-украшение-строка: подчеркивание;
стиль оформления текста: твердый;
цвет оформления текста: красный;
толщина украшения текста: 1px;
}
.thick {
текст-украшение-строка: подчеркивание;
стиль оформления текста: твердый;
цвет оформления текста: красный;
толщина украшения текста: 5 пикселей;
}
.shorthand {
текст-украшение: подчеркивание сплошным красным 5px;
} 
Не рекомендуется. Вместо этого используйте CSS.
Поскольку немногие шрифты имеют девять оттенков жирности, в большинстве шрифтов от 100 до 500 одинаковы, от 600 до 800 одинаковы, а 900 — самый жирный. Одним из ответвлений этого является то, что, хотя «нормальным» является 400, во многих случаях 100 на самом деле не легче. Если вы не используете гарнитуру с множеством доступных начертаний шрифта, нет практического способа представить текст с плотностью, меньшей, чем обычно. Чтобы узнать больше об этой теме, см. Наше руководство по шрифтам и веб-типографике.
1.1 Цвет фона
Вы можете уменьшить объем стиля, установив класс атрибут элемента:
..
С помощью CSS вы можете добиться этого следующим образом:
onkeydown onkeyup (внутренние события)
Чтобы указать синий курсивный текст в абзаце с помощью CSS:
Этот атрибут определяет горизонтальный
выравнивание правила относительно окружающего контекста.
Возможные значения:
Ширина по умолчанию
100%, т.е. правило распространяется на весь холст.
то, что его окружает, зависит от пользовательского агента.
Немного странно, но он есть:
Д .:
Для этого есть веская причина: поддержка браузера.
Опять же, браузеры, которые не поддерживают сокращение 
Это свойство можно использовать для изменения ширины и цвета текста. Это свойство поддерживается с помощью префикса -webkit-. 
Введение
1"> 1.1. Модуль взаимодействия 
Другая терминология и концепции, используемые в этой спецификации, определены.
в [CSS2] и [CSS-WRITING-MODES-4].
Для всех остальных типов ящиков
украшения распространяются на всех дочерних элементов.
На Уровне 3 и выше по умолчанию
пропускаются только поля, границы и заполнение рамки украшения.
В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому значению по умолчанию.
.. подчеркивание элемента цитаты переносится на
анонимный встроенный блок, который окружает элемент span, вызывая
текст "Помогите, помогите!" быть синим, с синим подчеркиванием от
анонимная строка под ним, цвет взят из
элемент цитаты. 
Часто это подчеркивается красной волнистой линией.
Однако,
в той мере, в какой уважение любого из этих свойств
было бы значимым и практичным
учитывая выбранную пользователем визуализацию,
UA должен применять их
как модификации его стиля по умолчанию.
ниже.
Процент наследуется как относительное значение,
и поэтому будет масштабироваться вместе с изменениями шрифта по мере его унаследования.
Вместо этого он рассчитывается для каждой строки из всего текста, украшенного рамкой для украшения в этой строке, считается текстом .
Однако потомки украшения коробки, которые пропускаются из-за пропуска текста-декорации,
потомок встроен с текстом-декорацией-пропуском: чернила,
и любые потомки, которые не участвуют во встроенном контексте форматирования блока украшения
исключаются из множества рассматриваемого текста.
(Алфавитные базовые линии могут отличаться между блоками, выровненными по базовой линии
если доминирующая базовая линия не буквенная.)
Чтобы верхние и нижние индексы не сбивали эту позицию с толку,
встроенный с не начальным вычисленным вертикальным выравниванием рассматривается как имеющий идеальное положение подчеркивания своего родителя.
Расположите часть линии поперек каждого украшенного фрагмента в этой позиции.
В этом случае подчеркивание обычно не пересекает нижние элементы.(Это иногда называют «бухгалтерским» подчеркиванием.)
Это значение можно комбинировать с левым или правым, если конкретная сторона предпочтительнее в вертикальных типографских режимах.
Поскольку положение подчеркивания текста наследуется и не сбрасывается
сокращенно text-decoration следующий пример
переключает документ на использование с подчеркиванием, что может
быть более подходящим для систем письма с длинными, сложными
спусковые устройства. Это также часто полезно для математических или химических
тексты, в которых используется много нижних индексов.
Если это приводит к тому, что подчеркивание будет нарисовано на "верхней" стороне
текст, затем линия также переключает стороны и рисуется на
сторона "снизу".
"> ✔ MDN
Например, надчеркнутый мелкий шрифт
фактически станет сквозной строкой, если элемент содержит текст со значительно большим размером шрифта.
Даже для подчеркивания, если текст не выровнен по алфавитной базовой линии
(например, в стилях вертикального набора,
текст по умолчанию выравнивается по центральной базовой линии [CSS-WRITING-MODES-4])
подчеркивание прорежет текст-потомок большего размера шрифта.
Таким образом, учет дочернего контента UA приведет к лучшей типографике.
Это позволяет правильно оформить надстрочные и подстрочные индексы.
(подчеркнуты, зачеркнуты и т. д.)
но мешает им исказить или нарушить расположение таких украшений на своих предках.
2 + Chrome для Android 57–64 Android WebView 57–64 Samsung Internet7.0–9.0 Opera Mobile 43–46
Размер вставки зависит от User Agent.
(например, половина толщины линии)
но не должно быть нулевым.
(Это важно для китайского языка, где подчеркивание - это форма пунктуации.)
Они оформлены так же, как и любой другой персонаж.
См. Протокол Telcon, alreq # 86, csswg # 1288
Следовательно, UA должен преобразовать текст в запуски сценария.
как описано в «Примечаниях к реализации» [UAX24] «Свойство сценария Unicode», в частности в подразделах 5.1 и 5.2.
После применения описанной эвристики (или аналогичного анализа скриптов),
UA должен отключить пропуск рукописного ввода для всех диапазонов текста
которые определены как скрипт CJK.
Например,
UA может предполагать, что окончания квадратных линий ниже определенного порога размера
по соображениям производительности;
или используйте трапециевидные окончания для аппроксимации кривых,
особенно на украшениях с более тонкими линиями.
С точки зрения эстетики,
UA может также учитывать, что происходит, когда граница глифа
пересекает только часть толщины линии
или наклонен близко к горизонтали - 
Например:
Кунжут с начинкой - U + FE45 '', а открытый кунжут - U + FE46 ''.
Метки должны оставаться вертикальными в вертикальных типографских режимах:
как и символы CJK, они не поворачиваются в соответствии с режимом письма.Ориентация меток в горизонтальных типографских режимах или вертикальных режимах письма на этом уровне не определена.
(но может быть определено на будущем уровне, если возникнут определенные варианты использования).
