Как сделать обводку букв

#css3 #html5 #svg

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

Ответы

Ответ 1

Вариант с text-shadow:



body {
  background: #ccc;
}

h1 {
  text-transform: uppercase;
  font-family: Arial Black;
  text-align: center;
  font-size:3.5rem;
  
  -webkit-text-stroke: 1px black;
   color: white;
    text-shadow:
       2px  2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000;
  
}
Почувствуй атмосферу




Вариант с svg:



body {
  background: #ccc;
}

svg text {
  text-transform: uppercase;
  font-family: Arial Black;
  font-size:32px;
}



Ответ 2

Можно с помощью теней, накладываете 4 тени и каждую двигаете в разные стороны



div {
  font-size: 46px;
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  text-shadow: .04em 0 #000, -.04em 0 #000, 0 .04em #000, 0 -.04em #000;
}
ПОЧУВСТВУЙ АТМОСФЕРУ




Можете также посмотреть в сторону -webkit-text-stroke