атрибут порядка рисования игнорируется Chrome

Question

Я пытаюсь оформить некоторый текст белым текстом и черным штрихом. Я хочу, чтобы он имел толстый штрих, при этом текст оставался видимым.

Для этого я использовал следующее CSS:

element {
    -webkit-text-stroke: 6px black;
    color: white;
    paint-order: stroke;
}

Однако paint-order не работает правильно в Chrome браузерах. Вот демонстрация, Firefox слева и Chrome справа. Справа видно, что Chrome не поддерживает атрибут paint-order, несмотря на то, что он предположительно совместим с версии 35 .

CodeSandbox, который я создал для демонстрации.

Нужен ли какой-то дополнительный атрибут, чтобы он работал во всех браузерах? Моя Chrome версия 80.0.3987.132 и Firefox 74.0.

Answer 1

Ваш браузер поддерживает paint-order?

проверьте это здесь: https://caniuse.com/#feat = mdn-css_properties_paint-order

---

Вы можете использовать много теней для текста, чтобы эффект размытия наконец выглядел как Эффект удара как возможная альтернатива:

демонстрация идеи, которая стоит того, что она есть:

h1, h2 {
color:white;
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black,0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black,0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black,0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
letter-spacing:4px;
}

/* dummy demo */
h2 {
text-shadow: 
   0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue,0 0 2px blue,
   0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white, 0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white, 0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white, 0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,
   0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson,0 0 6px crimson;
   }

<h1>Hello The World</h1>
<h2>Hello The World</h2>

---

Если вы хотите реализовать это среднее text-shadow штрихование только там, где paint-order не реализовано, @supports может быть полезным https://developer.mozilla.org/en-US/docs/Web/CSS/@supports / https://caniuse.com/#feat = css -функции запросов