CSS 글꼴 테두리?

모든 새로운 CSS3 테두리가 계속 진행되면서 ( -webkit, ...) 글꼴에 테두리를 추가 할 수 있습니까? (파란색 트위터 로고 주위의 흰색 테두리처럼). 그렇지 않다면 CSS / XHTML에서 이것을 달성 할 정도로 못생긴 해킹이 있습니까? 아니면 여전히 Photoshop을 실행해야합니까?

-webkit 접두어 뒤에있는 일부 브라우저 에서 지원되는 text-stroke 라는 실험용 CSS 속성이 있습니다 .

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

또 다른 가능한 트릭은 속성을 사용하여 모든 방향으로 한 픽셀 씩 네 개의 그림자를 사용하는 것입니다 text-shadow.

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

그러나 1 픽셀 이상의 두께에서는 흐려질 것입니다.

최신 정보

스트로크를 생성하는 SCSS 믹스 인은 다음과 같습니다. http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

예, 그렇습니다 .. 받아 들여지고 좋은 답변이 있습니다.

그러나 ... 누군가가 이것을 필요로하고 타이핑 코드를 싫어하는 경우 ...

이것은 IE가 아닌 CrossBrowser를 지원하는 2px 검은 색 테두리입니다. @ fontface 글꼴 에이 글꼴이 필요했기 때문에 이전에 본 답변보다 깨끗해야했습니다. 나는 거의 모든 측면을 픽셀 단위로 사용하여 "거의 없음"을 확인하십시오. 퍼지 "(한글 또는 유사한) 글꼴. 하위 픽셀 (0.5px)을 추가 할 수는 있지만 필요하지 않습니다.

국경을위한 긴 코드 ??? ...예!!!

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

CSS (또는 / )와 매우 낮은 흐림 효과를 사용하여 텍스트 스트로크를 에뮬레이션 할 수 있습니다 .text-shadow-webkit-text-shadow-moz-text-shadow

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

그러나 이것이 -webkit-text-stroke부동산 보다 더 광범위하게 사용 가능하지만 대부분의 사용자가 사용할 수는 있지만 문제가되지는 않을 것입니다.

-webkit-text-stroke를 언급 한 일부 답변에 대해 자세히 설명하기 위해 작동하는 코드는 다음과 같습니다.

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

텍스트 획 사용에 대한 자세한 기사는 여기에 있으며 텍스트 획을 지원하는 브라우저 목록은 여기에 있습니다 .

'text-stroke'속성이있는 것 같지만 (적어도 나에게는) Safari에서만 작동합니다.

http://webkit.org/blog/85/introducing-text-stroke/

내가 사용하는 것은 다음과 같습니다.

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

믹스 인이 적은 스트로크 글꼴 문자

스트로크를 생성하는 LESS 믹스 인은 다음과 같습니다. http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(대신 SCSS를 사용하는 pixelass 답변을 기반으로 함)

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

빠른 개요를 위해 여기에 언급 된 모든 솔루션을 비교했습니다.

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

나는 한 번 그 둥근 모서리를 시도하고 css3로 그림자를 떨어 뜨 렸습니다. 나중에도 여전히 제대로 지원되지 않는다는 것을 알았습니다 (물론 Internet Explorer!)

JS (IE Canvas가있는 HTML 캔버스) 에서이 작업을 시도했지만 성능에 많은 영향을 미칩니다 (C2D 컴퓨터에서도). 간단히 말해, 실제로 효과가 필요한 경우 JS 라이브러리 (대부분의 라이브러리는 IE6에서 실행할 수 있어야 함)를 고려하지만 성능 문제로 인해 과도하게 수행하지 마십시오. 여전히 대안이 필요한 경우 SFiR을 사용하고 PS와 SFiR을 사용할 수 있습니다. CSS3는 오늘 준비되지 않았습니다.

늦어서 죄송하지만 text-shadow에 대해 말하면서이 예제도 좋아할 것이라고 생각했습니다 (텍스트에 좋은 그림자가 필요할 때 자주 사용합니다).

                    text-shadow: -2px   -2px lightblue,
                                 -2px -1.5px lightblue,
                                 -2px   -1px lightblue,
                                 -2px -0.5px lightblue,
                                 -2px    0px lightblue,
                                 -2px  0.5px lightblue,
                                 -2px    1px lightblue,
                                 -2px  1.5px lightblue,
                                 -2px    2px lightblue,
                               -1.5px    2px lightblue,
                                 -1px    2px lightblue,
                               -0.5px    2px lightblue,
                                  0px    2px lightblue,
                                0.5px    2px lightblue,
                                  1px    2px lightblue,
                                1.5px    2px lightblue,
                                  2px    2px lightblue,
                                  2px  1.5px lightblue,
                                  2px    1px lightblue,
                                  2px  0.5px lightblue,
                                  2px    0px lightblue,
                                  2px -0.5px lightblue,
                                  2px   -1px lightblue,
                                  2px -1.5px lightblue,
                                  2px   -2px lightblue,
                                1.5px   -2px lightblue,
                                  1px   -2px lightblue,
                                0.5px   -2px lightblue,
                                  0px   -2px lightblue,
                               -0.5px   -2px lightblue,
                                 -1px   -2px lightblue,
                               -1.5px   -2px lightblue;
}