Font inherit family: css — Why would anyone use font-family: inherit;

Leave a Comment / Разное / By /

Объяснение ключевых слов initial, inherit, unset и revert в CSS — Веб-стандарты

В CSS есть несколько ключевых слов для задания значений свойств. Я собираюсь поговорить о нескольких из них: initial, inherit и об относительно новых — unset и revert.

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

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

Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей в CSS. Но если все эти ключевые слова являются своего рода сбросом, то почему их так много? Какие именно различия между ними? Я решил глубже изучить эти ключевые слова, чтобы раз и навсегда разобраться, что отличает их друг от друга.

Базовые стили для вебаСкопировать ссылку

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

Начальное значение для каждого свойства в CSSСкопировать ссылку

Каждое свойство в CSS имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется.

Пример начального значения из MDN:

Начальное значение свойства line-height — это normal.

Браузерные стилиСкопировать ссылку

После применения начальных стилей для всех CSS-свойств браузер загружает свои стили. Эти стили не имеют ничего общего с базовыми начальными значениями CSS-свойств.

Пример браузерных стилей:

Стили браузера Chrome, применяемые к элементу <h2>.

У HTML-элементов нет начальных значений для стилей! Базовые стили HTML-элемента, такого как <h2>, например, предоставляются стилями браузера, а не начальными значениями CSS-свойств.

Теперь начнем говорить о ключевых словах.

Ключевое слово

inheritСкопировать ссылку

Ключевое слово inherit сообщает браузеру, что значение свойства нужно найти у ближайшего родительского элемента и унаследовать его для текущего элемента. Если у ближайшего родителя также задано значение inherit, то браузер продолжит подниматься по DOM, пока не найдет какое-нибудь значение. Если значения нет, то браузер применит свои стили, а если и браузерных стилей нет, то тогда будет применено значение initial.

Ключевое слово

initialСкопировать ссылку

Чтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Мы часто думаем, что они автоматически приходят вместе с HTML, но это не так.

Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black.

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

inline для всех элементов. Поэтому, если для элемента <div> будет задано свойство display со значением initial, то свойство будет вычислено как inline, а не block, как в стилях браузера.

Пример:

div.box {
    background-color: red;
    display: initial; /* примет значение `inline`, а не `block` */
}

Пример на CodePen значения initial для свойства display элемента <div>.

Информация об initial-значении свойства display на MDN.

Ключевое слово

unsetСкопировать ссылку

Ключевое слово unset является уникальным и работает в зависимости от типа свойства. В CSS есть два типа свойств:

1. Наследуемые свойстваСкопировать ссылку

Свойства, которые затрагивают дочерние элементы. Все свойства, которые влияют на текст, имеют такое естественное поведение. Например, если мы зададим font-size элементу <html>, то он будет применяться ко всем дочерним элементам, пока вы не зададите другой font-size какому-нибудь из них.

Информация о наследуемости свойства font-size на MDN.

2. Ненаследуемые свойстваСкопировать ссылку

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

Информация о наследуемости свойства border на MDN.

Ключевое слово unset работает так же, как и inherit для наследуемых свойств. Например, для текстового свойства color оно будет работать как значение inherit, то есть будет искать ближайший родительский элемент с заданием нужного свойства, а если он не будет найден, то применится браузерное значение, а если и браузерных стилей нет, то применится значение initial.

Для ненаследуемых свойств unset ведет себя как initial, то есть применится значение по умолчанию. Например, для свойства border-color оно будет работать как initial.

.some-class {
    color: unset; /* будет равно `inherit` */
    display: unset; /* будет равно `initial` */
}

Зачем использовать

unset, если оно работает так же, как inherit и initial?Скопировать ссылку

Если unset

ведет себя как inherit и initial, то зачем оно может понадобиться? Если мы сбрасываем только одно свойство, то unset не нужен. Вместо него мы можем просто использовать inherit или initial. Но сейчас у нас есть свойство all, которое дает нам новую возможность — сбросить наследуемые и ненаследуемые свойства одновременно.

Таким образом, вам не нужно сбрасывать свойства по отдельности. Применение ключевого слова unset к свойству all приведет к сбросу всех наследуемых свойств к значению inherit и всех ненаследуемых свойств — к значению initial.

Это единственная причина существования нового ключевого слова unset! В противном случае мы могли бы вместо этого использовать

inherit и initial.

Вместо сброса свойств по отдельности, к примеру:

/* Плохо */
.common-content {
    font-size: inherit;
    font-weight: inherit;
    border-width: initial;
    background-color: initial;
}

Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:

/* Хорошо */
. common-content {
    all: unset;
}

Я создал небольшой пример для демонстрации того, как свойства ведут себя, когда используется свойство all со значением unset. Некоторые ведут себя так, как будто к ним применено значение inherit, а некоторые так, как будто к ним применено значение initial. Пример на Codepen использования

all: unset.

Ключевое слово

revertСкопировать ссылку

Но что, если мы хотим сбросить значение свойства до первоначально заданных браузером значений, а не до значений по умолчанию? Например, вернуть значение свойства display элемента <div> к значению block (это стили браузера), а не к значению inline (это базовые стили CSS).

Браузерные стили для тега div

Для этих целей мы скоро получим новое ключевое слово в CSS: revert. Оно очень похоже на unset, единственное отличие состоит в том, что оно предпочитает стили браузера базовым значениям свойств CSS. Например:

div {
    display: revert; /* = block */
}
h2 {
    font-weight: revert; /* = bold */
    font-size: revert; /* = 2em */
}

Таким образом, если мы хотим сбросить все стили HTML-элемента до базовых стилей браузера, мы можем сделать это так:

/* Хорошо */
.common-content {
    all: revert;
}

Соответственно, revert дает гораздо больше возможностей, чем unset. Правда, на данный момент revert работает только в Firefox и Safari. (В Chrome работает с версии 84 — прим. переводчика.)

ЗаключениеСкопировать ссылку

На этом всё. Надеюсь, вам понравилась эта статья, и вы чему-то научились из моего опыта.

Видео доклада по темеСкопировать ссылку

Я сделал короткий доклад на эту тему, смотрите видео целиком на YouTube:

Мой доклад «Ключевые слова в CSS, которые никто не понимает».

html — Почему мой дочерний класс не наследует шрифт родительского класса?

Задавать вопрос

спросил

Изменено 2 года, 9 месяцев назад

Просмотрено 807 раз

Я пытаюсь создать меню для своего веб-сайта.

В общем, у меня есть большой div, который покрывает все дочерние div внутри. Я установил для большого семейства шрифтов Div значение «A», некоторые из дочерних элементов наследуют этот шрифт, но поле выбора — нет.

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

Мой код:

HTML:

 
<голова>
    Главная страница
    

<тело>


            <дел>
                Предыдущая глава 
 

                 CH #212 
            

            <дел >
                Доступная глава 
 

                <выбрать>
<дел> Следующая глава

CH #213

CSS:

 . text-control-view{
    заполнение сверху: 10px;
  семейство шрифтов: «Алата», без засечек;
    цвет:#4a5568;
    дисплей: гибкий;
    выравнивание содержимого: пробел между;
    ширина:85%;
    поля:авто;
}
а {
    текстовое оформление: нет;
}
выбирать{
    фон:белый;
    отступ: 3px 10px;
    текстовое оформление: нет;
    граница: 1,5 пикселя сплошного серого цвета;
    размер шрифта: 16 пикселей;
    черный цвет;
    
}
.btn {
        граница: 1,5 пикселя сплошного серого цвета;
        размер шрифта: 16 пикселей;
        отступ: 3px 10px;
        фон:белый;
}

Мой Jsfiddle: https://jsfiddle.net/k57tzrcj/2/

Не могли бы вы, ребята, помочь мне прояснить это? Спасибо!

  • html
  • css

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

 ввод, выбор, текстовое поле и т.д... {
    семейство шрифтов: наследовать;
}

Добавить

 выбрать{
    фон:белый;
    отступ: 3px 10px;
    текстовое оформление: нет;
    граница: 1,5 пикселя сплошного серого цвета;
    размер шрифта: 16 пикселей;
    черный цвет;
    семейство шрифтов: наследовать;
}

Он будет наследоваться от родителя, в противном случае он будет использовать браузер по умолчанию.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

1.

1. Указание шрифтов и наследования

Проблема

Вы хотите установить шрифт текста на веб-страница.

Решение

Используйте семейство шрифтов свойство:

 р {
 семейство шрифтов: Georgia, Times, "Times New Roman", с засечками;
}

Обсуждение

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

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

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

Таблица 1-1. Общие значения семейства шрифтов и примеры

Общие значения семейства шрифтов

Примеры шрифтов

 с засечками

Джорджия, Times, Times New Roman, Garamond и учебник Century Schoolbook

 без засечек

Verdana, Arial, Helvetica, Trebuchet и Tahoma

 моноширинный

Courier, MS Courier New и Prestige

 курсив

Lucida Handwriting и Zapf-Chancery

 фэнтези

Comic Sans, Whimsey, Critter и Cottonwood

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

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

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

Вам не нужно устанавливать одни и те же свойства для каждого тег, который вы используете. Дочерний элемент наследует или имеет те же значения свойств, его родительский элемент, если CSS Спецификация, определяющая данное свойство, может быть унаследована. Для Например, если вы установите свойство font-family для показать шрифт с засечками в абзаце, который содержит em дочерний элемент, этот текст в em Элемент также выделен шрифтом с засечками:

 
Фонтан
со сломанным знаком он действительно сломан.

Наследование не происходит при двух обстоятельствах. Один встроен в спецификацию CSS и касается элементов, которые может создать коробку. Такие элементы, как h3 и p, называются блочный уровень элементы и могут иметь другие свойства, такие как поля, границы, отступы и фоны, как показано на рис. 1-1.

Рис. 1-1. Блочная модель для блочного элемента

Поскольку эти свойства не передаются дочернему элементы блочного уровня, вам не нужно писать дополнительные правила для противодействия визуальным эффектам, которые возникнут, если они были пройдены. Например, если вы применили маржу 15% к body элемент, это правило будет применяться к каждому h3 и p элемент, который является дочерний элемент этого элемента body . Если эти свойства были унаследованы, страница будет выглядеть так, как показано на рис. 1-2.

Рис. 1-2. Гипотетический макет наследуемых свойств полей и границ

Поскольку одни свойства определены как наследуемые, а другие нет, страница на самом деле выглядит так, как показано на Рисунок 1-3 в современном браузере, совместимом с CSS.

Рис. 1-3. Как выглядит страница, когда элементы блочного уровня не наследуют определенные свойства

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