Какова цель использования {font: inherit;}?

Ответ 1

Как и другие ответы, он наследует свойство CSS от родительского элемента.

То, что другие ответы не смогли сказать, - это то, зачем вам это нужно. Потому что, в конце концов, свойства CSS наследуются в любом случае, верно?

Ну, нет. Большинство из них по умолчанию (но цвет ссылки не наследуется от родительского элемента, например). Но рассмотрим этот случай:

p { color: blue; }

div.important { color: red; }

<div class="important">
    <p>This is a text</p>
</div>

Теперь текст будет синим, а не красным. Если мы хотим, чтобы <p> обладал стилем своих родителей, а не стилем по умолчанию, мы должны переопределить его CSS. Конечно, мы могли бы повторить значение свойства (red), но это нарушает DRY (не повторяйте себя). Вместо этого мы наследуем его:

div.important p { color: inherit; }

Ответ 2

Объявление font:inherit используется во многих стилях стилей CSS Reset, которые часто копируются в различные библиотеки и фреймворки. Оригинальный Reset CSS Эрик Мейер имеет font:inherit. Никакой конкретной мотивации не дается. Говорят, что общее обоснование заключается в "уменьшении несогласованности браузера в таких вещах, как высоты строк по умолчанию, поля и размеры шрифтов заголовков и т.д.". Но Мейер ссылается на предыдущий пост, где он объясняет эту идею, говоря, между прочим: "Я хочу все это, потому что я не хочу Возьмем стильные эффекты как должное. Это служит двум целям: во-первых, это заставляет меня думать о том, что немного сложнее в семантике моего документа. При использовании reset я не выбираю strong, потому что дизайн требует смелости. Вместо этого я выбираю правильный элемент - будь то его strong или em или b или h3 или что-то еще, - а затем стирайте его по мере необходимости."

Несколько HTML-элементов имеют рендеринг по умолчанию в браузерах в отношении свойств шрифта: заголовки, поля формы, ячейки заголовков таблицы, некоторые элементы фраз и т.д. Использование CSS Reset или, в частности, font: inherit означает, что в браузерах, поддерживающих inherit, все такие элементы отображаются в текстовом шрифте копирования, если в таблице стилей не указано иначе.

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

Ответ 3

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

По умолчанию свойство inherit, это означает, что у вас есть div и p.

<div>
    <p>Hello World!</p>
</div>

Теперь вы даете стиль:

div {font-famlily: Tahoma;}
p {font-family: inherit;}

Этот font-family равен inherit ed для p из его родительского элемента div.

Ответ 4

Не все браузеры наследуют свойства шрифта для всех элементов. Netscape 4.x, как известно, плохо о наследовании. Рассмотрим следующий стиль:

body { background: black; color: white }

В Netscape 4.x цвет не был применен к элементам таблицы, поэтому вы получите черный текст по умолчанию внутри таблицы на черном фоне.

Свойства шрифта имеют один и тот же вид сделки для некоторых элементов, особенно элементов формы (и элементов таблицы для старых браузеров). Нередко можно увидеть такое определение:

table, form { font: inherit }

Ответ 5

Использование {font:inherit;} в CSS имеет смысл, потому что различные пользовательские агенты (браузеры a.k.a.) имеют таблицу стилей пользовательского агента (read: default stylesheet) с чем-то вроде

body
{
    font: -magic-font-from-user-preferences;
}

textarea, input
{
    font: monospace;
}

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

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

Ответ 6

inherit в CSS просто означает, что он наследует значения от родительского элемента, например, например:

<div style="font-family: Arial;">
   <p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
      This text will be Arial..And inherit is default behavior of the browser
   </p>
</div>

Здесь <p> наследует font-family: Arial; от него родительский div

Вам нужно использовать наследование, например, в случае элементов привязки, свойство цвета обычно устанавливается в синий цвет в стиле пользовательского агента лист. Если вы хотите укрепить важность унаследованных value, вы можете использовать значение наследования в авторском или пользовательском стиле лист, переписывая объявление таблицы стилей пользовательского агента.

Дополнительные ссылки