[css] 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 답변을 기반으로 함)