У меня возникли проблемы с отображением одинаковой толщины шрифта в нескольких браузерах. Смотрите следующий пример. Если вы посмотрите его в Firefox, вы заметите, что пурпурный текст имеет ту же толщину, что и белый текст. Однако, если вы посмотрите на Chrome, розовый станет намного тоньше и его будет труднее прочитать.
https://jsfiddle.net/9a8omhnr/
HTML
<div class="container">
<ul>
<li class="active"><a href="#">Nav Item One</a></li>
<li><a href="#">Nav Item Two</a></li>
<li><a href="#">Nav Item Three</a></li>
<li class="active green"><a href="#">Nav Item Four</a></li>
</ul>
</div>
CSS
.container {
background-color: #000;
}
ul {
display: flex;
list-style: none;
}
ul li {
padding: 2rem .5rem;
}
a {
text-decoration: none;
font-family: "Montserrat", Helvetica, sans-serif;
font-weight: 300;
font-size: 0.8rem;
color: #fff;
}
.active a {
color: #ef1864;
}
Если я увеличу вес шрифта, это не решит проблему, потому что это также увеличивает вес в FF, не только Chrome, и поэтому оставляет текст слишком толстым в Firefox.