Chrome отрисовывает шрифты определенного цвета - PullRequest
0 голосов
/ 09 апреля 2020

У меня возникли проблемы с отображением одинаковой толщины шрифта в нескольких браузерах. Смотрите следующий пример. Если вы посмотрите его в 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.

1 Ответ

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

Это можно сделать с помощью медиазапросов

CSS:

/* Chrome only: */
  @media all and (-webkit-min-device-pixel-ratio:0) 
 and (min-resolution: .001dpcm) { 
  a {
       text-decoration: none;
       font-family: "Montserrat", Helvetica, sans-serif;
       font-weight: 400;
       font-size: 0.8rem;
       color: #fff;
    }
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...