CSS를 사용한 텍스트 테두리 (텍스트 테두리)

아래 이미지와 같이 텍스트 주위에 테두리를 통합하는 방법이 있습니까?

여러 텍스트 그림자 사용 :

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

또는 웹킷에서만 작동하는 텍스트 스트로크를 사용할 수 있습니다.

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

또한 더 읽어 CSS-트릭있다.

확실한. CSS3를 사용할 수 있습니다 text-shadow.

text-shadow: 0 0 2px #fff;

그러나 모든 브라우저에 즉시 표시되지는 않습니다. Modernizr 와 같은 스크립트 라이브러리를 사용하면 대부분의 브라우저에서 제대로 작동하는 데 도움이됩니다.

나는 텍스트 그림자를 곱하는 것에 기반한 그다지 솔루션을 좋아하지 않으며, 실제로 유연하지 않으며, 추가 할 방향이 8 인 2 픽셀 스트로크에 대해 작동 할 수 있지만 3 픽셀 스트로크 방향이 16이되는 식입니다. 관리하기 정말 불편하지 않습니다.

올바른 도구가 존재합니다. SVG입니다 <text> .이 경우 브라우저의 지원 문제는 아무것도 없습니다. '텍스트 그림자 사용에도 자체 지원 문제 filter: progid:DXImageTransform가 있기 때문에 사용할 수 있거나 IE <10이지만 종종 예상대로 작동하지 않습니다.

나에게 가장 좋은 해결책은 구형 브라우저의 경우 획이없는 텍스트로 대체 된 SVG로 남아 있습니다.

이러한 종류의 접근 방식은 3.04, Opera 8, IE 9 이후 거의 모든 버전의 Chrome 및 Firefox, Safari에서 작동합니다.

text-shadowChrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9 지원에 비해 훨씬 더 호환됩니다.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

다음은 다룰 가치가있는 모든 브라우저를 다룹니다.

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */