Как сделать закругленну обводку текста?

Question

Подскажите пожалуйста как сделать такую обводку у текста?

Answer 1

text-stroke такую обводку делает, но перед текстом. Поэтому поверх ещё раз написал(прошу прощение за позиционирование на костылях)). С круглым шрифтом обводка будет круглее.

Ещё как вариант - наложить эффект из svg.

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

.outer {
  display:inline–block;
Font-size: 3em;
   font-style: italic;
}
.shadow {
-webkit-text-stroke: 15px #fff;display:inline–block; position:absolute;
}
.inner {
position:relative;
display:inline–block;
}

   Lorem ipsum <div class=outer><div class=shadow>в моменте</div><div class=inner>в моменте</div></div> foo barr

Answer 2

.x {
  font-size: 50px;
  -webkit-text-stroke: .5em rgba(0, 150, 0, .5);
  /* без прозрачности текст накроет */
}

.y {
  font-size: 50px;
  -webkit-text-stroke: .5em rgba(0, 150, 0, .3);
  filter: drop-shadow(5px 0 0 lime);
  /* по идее тут можно поиграться с чем то вроде
  mix-blend-mode: difference
  выдергивая текст из его же обводки. в таком случае можно
  было бы избавиться от прозрачности, но чот не уверен */
}

.z {
  font-size: 50px;
  -webkit-text-stroke: .5em lime;
  paint-order: stroke fill;
}

<i class='x'>ну например так...</i>
<br>
<i class='x'>в моменте</i>
<br>
<i class='y'>или так...</i>
<br>
<i class='z'>ну например так...</i>

UPD

наконец-то вспомнил как обводко-опускатель называется...

вдоль и поперёк font- & text- облазил а оно paint-order называется... :face-palm:

и - интуитивно

https://developer.mozilla.org/ru/docs/Web/CSS/paint-order

в сниппете применил к классу .z

Answer 3

Есть инстукция и пример на её основе.

Я сделал немного иначе и получилось то, что ниже. И удачи с подбором ненулевых коэффициентов. stdDeviation и последний набор values отвечают за размер тени, а последнее значение в первых трёх наборах values управляет цветом. При небольшой толщине тень получается хорошо, но чем шире, тем больше блюр или пикселизация границы. Возможно, можно применить несколько фильтров.

body {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 2em;
}

.with-outline {
  position: relative;
  padding: .25em;
  color: white;
  letter-spacing: .25ch;
}

.with-outline::before, .with-outline::after {
  content: attr(aria-label);
  position: relative;
}

.with-outline::before {
  position: absolute;
  filter: url('#medal-text-filter');
}

.svg-with-filter {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -100;
}

<link href="https://fonts.googleapis.com/css2?family=Kablammo&display=swap" rel="stylesheet">

<svg class="svg-with-filter" aria-hidden="true">
  <filter id="medal-text-filter">
    <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="1" />
    <feColorMatrix in="blur" values="0 0 0 0 0.25  0 0 0 0 0.125  0 0 0 0 0.5  0 0 0 32 0" />
  </filter>
</svg>

Начинаем
<div class="with-outline" aria-label="В моменте"></div>
и продолжаем

Чтобы сделать широкую чёткую обводку без пикселизации надо применить фильтр многократно. Цвет текста и цвета в промежуточных фильтрах при таких формулах ни на что не влияют. Подбирать цвет надо только в последнем фильтре.

body {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 4em;
}

.with-outline {
  position: relative;
  padding: .25em;
  color: white;
  letter-spacing: .25ch;
}

.with-outline::before, .with-outline::after {
  content: attr(aria-label);
  position: relative;
}

.with-outline::before {
  position: absolute;
  filter: url('#medal-text-filter');
}

.svg-with-filter {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -100;
}

<link href="https://fonts.googleapis.com/css2?family=Kablammo&display=swap" rel="stylesheet">

<svg class="svg-with-filter" aria-hidden="true">
  <filter id="medal-text-filter">
    <feGaussianBlur in="SourceGraphic" result="blur1" stdDeviation="1" />
    <feColorMatrix in="blur1" result="matrix1" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix1" result="blur2" stdDeviation="1" />
    <feColorMatrix in="blur2" result="matrix2" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix2" result="blur3" stdDeviation="1" />
    <feColorMatrix in="blur3" result="matrix3" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix3" result="blur4" stdDeviation="1" />
    <feColorMatrix in="blur4" result="matrix4" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix4" result="blur5" stdDeviation="1" />
    <feColorMatrix in="blur5" result="matrix5" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix5" result="blur6" stdDeviation="1" />
    <feColorMatrix in="blur6" result="matrix6" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix6" result="blur7" stdDeviation="1" />
    <!-- В последнем фильтре надо настроить цвета -->
    <feColorMatrix in="blur7" values="0 0 0 0 0.5  0 0 0 0 0.125  0 0 0 0 0.75  0 0 0 5 0" />
  </filter>
</svg>

Начинаем
<div class="with-outline" aria-label="В моменте"></div>
и продолжаем

А ещё можно сделать за две пары фильтров, но кажется, качество края получается хуже:

body {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 4em;
}

.with-outline {
  position: relative;
  padding: .25em;
  color: white;
  letter-spacing: .25ch;
}

.with-outline::before, .with-outline::after {
  content: attr(aria-label);
  position: relative;
}

.with-outline::before {
  position: absolute;
  filter: url('#medal-text-filter');
}

.svg-with-filter {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -100;
}

<link href="https://fonts.googleapis.com/css2?family=Kablammo&display=swap" rel="stylesheet">

<svg class="svg-with-filter" aria-hidden="true">
  <filter id="medal-text-filter">
    <!-- В первых двух надо настроить жирность -->
    <feGaussianBlur in="SourceGraphic" result="blur1" stdDeviation="4" />
    <feColorMatrix in="blur1" result="matrix1" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 64 0" />
    <feGaussianBlur in="matrix1" result="blur2" stdDeviation="1" />
    <!-- В последнем фильтре надо настроить цвета -->
    <feColorMatrix in="blur2" values="0 0 0 0 0.5  0 0 0 0 0.125  0 0 0 0 0.75  0 0 0 16 0" />
  </filter>
</svg>

Начинаем
<div class="with-outline" aria-label="В моменте"></div>
и продолжаем

БЛОГ НА HUSL

Как сделать закругленну обводку текста?

Ответы (3 шт):

UPD