Текущий размер шрифта не работает. Конфликт с css сбросить "шрифт: наследовать;". Почему? - PullRequest
Новая
       27

Текущий размер шрифта не работает. Конфликт с css сбросить "шрифт: наследовать;". Почему?

0 голосов
/ 04 апреля 2020

Я хочу использовать жидкий размер шрифта с кодом от https://css-tricks.com/snippets/css/fluid-typography/. Но мой CSS Meyer Reset (font: inherit;), похоже, переопределяет код. Я не знаю почему? Вот код:

CSS Сброс css: 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;

}

Позже код в таблице стилей css для получения плавного размера шрифта между 16px и 40px; 

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  :root {
    font-size: calc(16px + (40 - 16) * ((100vw - 320px) / (1000 - 320)));
  }
}
@media screen and (min-width: 1000px) {
  :root {
    font-size: 40px;
  }
}

Затем, когда я проверяю в браузере, скажем, размером браузера 700px, последний css текучий код перезаписывается «font: наследовать;» в CSS Сбросить код. Поэтому, похоже, он не работает с текучим кодом. Любые идеи? Это работает или нет?

Картинка. Инструмент проверки в браузере показывает, что последний код не активен?

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

1 Ответ

0 голосов
/ 04 апреля 2020

MDN: наследовать

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

Таким образом, если правило css медиазапроса применено к :root и все его потомки имеют font: inhert, они будут наследовать настройки шрифта от :root

Если для всех элементов (например, p) font-size не будет установлено значение inherit, а вместо этого будет вычисленное значение, вы не сможете изменить размер шрифта определенного элемента и позволить этим настройкам распространяться на его потомков, но вам нужно будет установить его и для каждого из потомков. Таким образом, свойство font-…, установленное в inherit, является предполагаемым поведением.

Здесь font-size применяется к каждому элементу напрямую, если вы измените размер шрифта p, он не применяется для span: 

* {
  font-size: 20px;
}

p {
  font-size: 10px;
}
<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>

С другой стороны, если font-size равно inherit, поэтому, если вы установите font-size, оно будет распространяться на детей. 

* {
  font-size: inherit;
}

div {
  font-size: 20px;
}


p {
  font-size: 10px;
}
<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>
...