Обводка буквы

<style>
div {
  -webkit-text-stroke: 0; /* свойство text-stroke наследуется, применяется ко всем элементам, изменяет текст */ 

  /* или */ 

  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: currentcolor;
}
</style>

<div>Текст</div>

Контур не изменяет ширины буквы, межбуквенного или межсловного расстояния. Одна его половина находится на букве, вторая — вне её. Тень от буквы, при наличии, располагается под контуром, так как начинается от края буквы.

<style>
div {
  color: green;
  -webkit-text-stroke: .07em rgba(0,0,0,.5);
  text-shadow: .07em 0 red;
}
</style>

<div>Щ</div>

Примеры

Контуры букв

<style>
@supports (-webkit-text-stroke: 1px blue) { /* если есть поддержка свойства: невидимый текст посетителям не понравится */
  p {
    color: transparent; /* прозрачный цвет букв */
    -webkit-text-stroke: 1px blue;
  }
}
</style>

<p>Текст

Полосатая тыльная сторона

<style>
@supports (-webkit-text-stroke: 1px blue) {
  p {
    color: transparent;
    -webkit-text-stroke: 1px blue;
    text-shadow: -5px -2px blue, -4px -1px #fff;
  }
}
@supports (-webkit-background-clip: text) {
  p {
    background: repeating-linear-gradient(45deg, blue, blue 1px, white 2px, white 3px);
    -webkit-background-clip: text;
  }
}
</style>

<p>Текст

Окантовка

<style>
p {
  position: relative;
  color: black;
  -webkit-text-stroke: .04em black;
}
p::before { /* второй слой */
  content: attr(data-text);
  position: absolute; /* в том же месте той же ширины */
  left: 0;
  right: 0;
  -webkit-text-stroke: .02em gold;
}
</style>

<p data-text="Текст">Текст

Красивый

<style>
i {
  position: relative;
  letter-spacing: -0.1em;  /* приблизить буквы друг к дружке */
}
@supports (-webkit-text-stroke: .03em DeepSkyBlue) {
  i {
    color: LightCyan;
    -webkit-text-stroke: .03em DeepSkyBlue;
  }
  i::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    -webkit-text-stroke: .1em RoyalBlue;
  }
}
</style>

<i data-text="К">К</i><i data-text="р">р</i><i data-text="а">а</i><i data-text="с">с</i><i data-text="и">и</i><i data-text="в">в</i><i data-text="ы">ы</i><i data-text="й">й</i>

345-45-45

<style>
div {
  position: relative;
  padding-left: .2em;
}
div::before {  /* чтобы текст был лучше различим на картинке */
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  padding-left: .2em;
  -webkit-text-stroke: .2em #E09E0C;
  z-index: -1;
}
</style>

<div data-text="Текст">Текст</div>