Размер шрифта тега h2 переписывается браузером

Question

У меня есть элемент h2 с классом и подходящими стилями размера шрифта. Это очень странно для Chrome на рабочем столе MAC, так как внутри печатаются теги элемента h2, и он использует мои глобальные стили "*". Как я могу это исправить? Вот мой оригинальный код:

* {
  font-size: 14px;
  font-size: 1.4rem;
  box-sizing: border-box;
}

h2.ttl {
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

<h2 class="ttl">
  text<br>
  <span>column</span>
</h2>

Answer 1

Исходя из фрагмента html, не похоже, что вам нужны другие классы в селекторе, попробуйте просто селектор h2.ttl.

<style>
* {
    font-size: 14px;
    font-size: 1.4rem;
    box-sizing: border-box;
}
h2.ttl {
    font-size: 28px;
    font-size: 2.8rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
</style>

<h2 class="ttl">
 text<br>
 <span>column</span>
</h2>

Answer 2

Установка явного размера шрифта на * - очень плохая практика. Он всегда будет переопределять размеры для дочерних элементов любого элемента. Лучше установить это так:

* {
 font-size: inherit;
}

body {
 font-size: 16px;
}

Если вы настаиваете на использовании универсального селектора с явным размером шрифта, вы можете использовать

h2.ttl,
h2.ttl * {
  font-size: 28px;
}

Answer 3

В примере, который вы написали, может показаться, что h2 выбран неправильно, но если h2 находится внутри классов kasoumv и text, вы можете попытаться форсировать стиль, используя цепочку класса h2 для себя.:

h2.ttl.ttl

Это похоже на использование атрибута! Important, но менее хакерского.