Пунктирные подчеркивания не отображаются правильно в Chrome - PullRequest
Новая
       30

Пунктирные подчеркивания не отображаются правильно в Chrome

0 голосов
/ 24 апреля 2018

Используя Chrome 65, похоже, что text-decoration: underline dotted; дает неутешительный результат:

enter image description here

В то время как на Firefox я получаю ожидаемоерезультат:

enter image description here

Что не так с хромом?

Я расширил фрагмент с дальнейшим тестом.Кажется, что это только с определенными размерами шрифта и гранями шрифта.В частности, здесь с Trebuchet MS и размером шрифта 18px. 

span{
  text-decoration: underline dotted;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  padding: 1rem;
  background-color: black;
  color: white;
  display: inline-block;
  margin: 1rem;
}
<span style="font-size: 12px;">
  A 12px button of some sort
</span>

<span style="font-size: 14px;">
  A 14px button of some sort
</span>

<span style="font-size: 16px;">
  A 16px button of some sort
</span>

<span style="font-size: 18px; background-color: darkRed;">
  A 18px button of some sort
</span>

<span style="font-size: 20px;">
  A 20px button of some sort
</span>

1 Ответ

0 голосов
/ 24 апреля 2018

Использовать text-decoration-skip-ink: none (Значение по умолчанию было изменено на auto в https://crrev.com/514104.)

Если вы посмотрите внимательно, пробелы в подчеркивании соответствуют петлям внизу букв, которые лежат оченьрядом с базовой линией шрифта. Похоже, что алгоритм пропускает чернила, выбирая обрезку подчеркивания здесь - но только для пунктирной и пунктирной, и только для определенных размеров шрифта.

https://crbug.com/808603 предполагает, что основной причиной является то, что точки и тире имеют высоту два пикселя.

...