Добавлять край около текста

Чтобы добавлять край к тексту и ценным бумагам, я использую 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 и не является стандартным).

8
задан 29.01.2016, 07:23
3 ответа

Докуда, нужно надеяться, что text-stroke вынесен из-за нее mayorГ - в браузеров. Тем временем существует одна soluciГіn альтернатива, использовать SVG inline.

Пример:

<svg width="500" height="75" viewBox="0 0 500 75">
  <text x="0" y="55" style="fill: white; stroke: #000; stroke-width: 3px; font-size: 50px; font-weight: bold; font-family: verdana ">
    Texto con borde
  </text>
</svg>

Из-за комментариев:

Я Сделал несколько доказательств, лучший выбор, который я нахожу для того, чтобы он приспособился к высокому, состоит в том, чтобы использовать viewBox и height из 100 % в элементе.

.contenedor {
  width: 100%;
  height: 50px;
  background: green;
}
<div class="contenedor">  
<svg height="100%" viewBox="0 0 500 75">
  <rect x="0" y="0" width="100%" height="100%" style="fill: red;" />
  <text x="25" y="55" style="fill: white; stroke: #000; stroke-width: 3px; font-size: 50px; font-weight: bold; font-family: verdana ">
    Texto con borde
  </text>
</svg>
</div>

Глаз! Это решение не взаимозаменяемые с text-stroke, так как например не является выполнимым менять стиль только слова параграфа.

4
ответ дан 24.11.2019, 14:56
  • 1
    #201; sta - альтернатива, которая выдвигала меня, но я встречаюсь с проблемой integraci и # 243; n с оставшейся частью элементов. и #191; Есть какой-то способ для того, чтобы высота приспособилась autom и # 225; ticamente в контент? (Если не, они у меня остаются место в мишени сверху и(или) под SVG если только я не определил высоту) – Alvaro Montoro♦ 29.01.2016, 15:23
  • 2
    @AlvaroMontoro после нескольких доказательств, лучшего soluci и # 243; n, который я нашел, состоит в том, чтобы ты дал ему height = и quot; 100 % и quot; в элемент. Я оставляю тебе пример в rta. – rnrneverdies 31.01.2016, 01:09

До сих пор самое предстоящее решение - с text-shadow и семья sans-serif ты можешь получать интересный эффект.

body { background-color: #fff; }
p {
  color: white;
  font-size: 68px;
  font-family: sans-serif;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
<p>StackOverFlowES</p>
2
ответ дан 24.11.2019, 14:56

В дату нет "совершенного" решения для всех browsers. Как я не вижу в сайте http://caniuse.com/#search=text-stroke, ни Firefox, Internet Explorer, Edge ни Opera Mini, они выносят метод text-stroke.

Решение, которое ты используешь с text-shadow это та, которая рекомендуется как самая приблизительная, но как ты это протестировал, только функционирует правильно, если толщина края 1px, если он верхний, края не хорошо определены в углах букв.

0
ответ дан 24.11.2019, 14:56
  • 1
    Этот ответ мне кажется повторно написанным текстом вопроса различного способа (главное различие - ссылка в caniuse). Действительно я не думаю, что он не предлагает ничего нового. – Alvaro Montoro♦ 29.01.2016, 15:13