Чтобы добавить границу к тексту и заголовкам, я использую text-shadow
и добавляю несколько теней для имитации этого эффекта:
div {
font-family:verdana;
font-size:50px;
color:white;
text-shadow: 1px 0px 0px black,
0px 1px 0px black,
-1px 0px 0px black,
0px -1px 0px black;
}
<div>TEXTO CON BORDE</div>
Этот метод хорошо работает, если граница представляет собой один пиксель, но не работает, если граница толще, так как вам придется добавить больше теней, и все равно будут видны скачки в углах букв:
div {
font-family:verdana;
font-size:50px;
color:white;
text-shadow: 3px 0px 0px black,
0px 3px 0px black,
-3px 0px 0px black,
0px -3px 0px black;
}
<div>TEXTO CON BORDE</div>
Мой вопрос: есть ли способ решить эту проблему? (кроме добавления большего количества теней). И если возможно, сделайте этот метод стандартным и работающим во всех основных браузерах (я знаю, что он существует, text-stroke
но он не работает в IE/Edge или Firefox и не является стандартным).
Насколько я знаю, следует ожидать, что
text-stroke
он поддерживается большинством браузеров. А пока есть альтернативное решение — использовать встроенный SVG .Пример:
По комментариям:
Я сделал несколько тестов, лучший вариант, который я нашел для адаптации к высоте, — это использовать viewBox и
height
100% для элемента.Глаз! Это не взаимозаменяемое решение с
text-stroke
, поскольку, например, невозможно изменить стиль только одного слова абзаца.Пока самое близкое решение — с
text-shadow
семьейsans-serif
можно получить интересный эффект.На сегодняшний день не существует «идеального» решения для всех браузеров. Как я вижу на сайте http://caniuse.com/#search=text-stroke , ни Firefox, ни Internet Explorer, ни Edge, ни Opera Mini не поддерживают расширение
text-stroke
.Решение, которое вы используете
text-shadow
, рекомендовано как наиболее близкое, но, как вы проверили, оно работает правильно только в том случае, если толщина границы равна1px
, если она больше, границы нечетко определены в углах букв.