Обводка текста проходит сама по себе при использовании Tailwind CSS
Обновлено: Аналогичный пост уже был сделан: Text Stroke (-webkit-text-stroke) css Проблема
У меня очень странная проблема с текстом на веб-сайте, над которым я работаю. Раньше такого не было, и я ничего не менял, но однажды я загрузил веб-сайт и заметил, что примененная мною обводка текста проходит сама по себе (см. изображение). Я использую Tailwind CSS. Вот код элемента
Буквы а и е прорезаются сами собой.
Код для элемента:
<h1 className = "text-7xl text-white text-stroke-3 text-center mt-5 font-bold">
How are you feeling today?
</h1>
Также этот text-stroke является пользовательским свойством CSS, которое я определил следующим образом:
.text-stroke-3 {
-webkit-text-stroke: 3px black;
}
Я попытался изменить h1 на абзац и изменить шрифт текста. Я также пытался использовать
<b></b>
чтобы инкапсулировать текст вместо font-bold.
Ни один из них не работал.
Вероятно, вы используете вариативный шрифт. Смотрите этот пост: "Проблема с обводкой текста (-webkit-text-stroke) css" для обходных путей.
Ответы 2
Я предполагаю, что проблема вызвана свойством -webkit-text-stroke, которое поддерживается не всеми браузерами и может вызывать проблемы с некоторыми шрифтами.
Вместо этого вы можете использовать текстовую тень.
.text-stroke-3 {
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
Это создаст четыре текстовые тени вокруг текста, которые придадут вид stroke. Вы можете настроить размер обводки, изменив значения свойства text-shadow.
Интересное решение, но вокруг текста с тенями заметны визуальные странности. Также я использую хром, поэтому мой браузер не должен быть проблемой.
Подобный пост уже был: Обводка текста (-webkit-text-stroke) css Проблема
Кажется, что основная проблема заключается в том, что сама текстовая обводка webkit несовместима. Я решил эту проблему, используя другой шрифт.
Я думаю, вы изменили стиль шрифта в родительском элементе, и это влияет на этот элемент. Осмотрите этот элемент и убедитесь, что это не из-за нового шрифта.