Почему увеличение размера шрифта <span>непропорционально по сравнению с остальными? - PullRequest
Новая
       11

Почему увеличение размера шрифта <span>непропорционально по сравнению с остальными?

0 голосов
/ 11 февраля 2019

Я хочу увеличить следующий текст до размера шрифта: 3em, «Some» и «text».Когда я применяю следующее: 

* {
  font-size: 10px;
}

.foo {
  font-size: 3em;
}
<div>
  <div class="foo"><span>Some</span> text</div>
</div>

размер "Some" в пределах <span> увеличивается гораздо быстрее, чем "text".Почему это происходит и как мне это предотвратить?

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Поскольку селектор * также выбирает все , включая элементы span, за исключением случаев, когда его переопределяет другое правило CSS.Таким образом, содержимое foo DIV равно 3em (= 3 x 10px), тогда как span в нем сбрасывается в 10px по этому правилу *.

Если вы определяете размер 10px дляdiv вместо *, все выглядит иначе: 

div {
  font-size: 10px;
}

.foo {
  font-size: 3em;
}
<div>
  <div>Font size defined for DIVs</div>
  <div class="foo"><span>Some</span> text</div>
</div>
0 голосов
/ 11 февраля 2019

Селектор * соответствует всем элементам.Правила, определенные в этом (*) селекторе, имеют приоритет над правилами, определенными для родительских элементов.

Таким образом, даже если по умолчанию наследуется font-size, размер шрифта в .foo не влияетразмер шрифта на дочернем элементе span.

Вы можете прочитать о *, универсальном селекторе - особенно о том, когда его использовать.

По умолчанию font-size - этообычно это то, что вы хотите определить для элемента html.Что решило бы вашу проблему: 

html {  font-size: 10px;  }
.foo {  font-size: 3em;  }

Таким образом, размер шрифта span, унаследованный от .foo, имеет приоритет над font-size, унаследованным от html.В результате вышеприведенного кода текст внутри div с классом .foo и текст внутри span будут иметь одинаковое значение (3em) и одинаковое вычисленное значение (3 раза по 10px).

Если вы сделали: 

html {  font-size: 10px;  }
.foo {  font-size: 3em;  }
span {  font-size: 3em;  }

Span все равно будет иметь значение 3em, но вычисленное значение будет 10px * 3 * 3 (90px), в 3 раза больше, чем размер шрифта .foo.Это потому, что em относится к font-size родительского элемента.

0 голосов
/ 11 февраля 2019

Вы должны использовать постоянные измерения шрифта на всей странице.Если вы используете px, придерживайтесь px.Если вы используете em или rem, придерживайтесь этого.Прямо сейчас вы показываете два разных измерения (что, скорее всего, является проблемой): 

* {  font-size: 10px;  }
.foo {  font-size: 3em;  }

Поскольку pixels и em отображаются по-разному, измените его на: 

* {  font-size: 10em;  }
.foo {  font-size: 3em;  }

Или измените его так, чтобы оба элемента font-size использовали px.Ваш выбор.

...