Batas Font CSS?

Dengan semua hal perbatasan CSS3 baru yang terjadi ( -webkit, ...) apakah sekarang mungkin untuk menambahkan perbatasan ke font Anda? (Seperti perbatasan putih solid di sekitar logo Twitter biru). Jika tidak, apakah ada peretasan tidak terlalu jelek yang akan mencapai ini dalam CSS / XHTML atau apakah saya masih perlu menjalankan Photoshop?

Ada properti CSS eksperimental yang disebut teks-stroke , yang didukung pada beberapa browser di belakang awalan -webkit .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Trik lain yang mungkin dilakukan adalah dengan menggunakan empat bayangan, masing-masing satu piksel pada semua arah, menggunakan properti 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>

Tapi itu akan menjadi kabur untuk ketebalan lebih dari 1 piksel.

MEMPERBARUI

Berikut adalah mixin SCSS untuk menghasilkan stroke: 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);
}

YA pertanyaan lama .. dengan jawaban yang diterima (dan baik) ..

TAPI ... Jika ada yang membutuhkan ini dan membenci mengetik kode ...

INI adalah perbatasan hitam 2px dengan dukungan CrossBrowser (bukan IE). Saya membutuhkan ini untuk font font @fontface sehingga perlu lebih bersih daripada jawaban yang terlihat sebelumnya ... Saya mengambil setiap sisi pixelwise untuk memastikan ada (hampir) tidak ada celah untuk " font fuzzy "(digambar atau serupa). Subpixels (0,5px) dapat ditambahkan tetapi saya tidak membutuhkannya.

Kode panjang hanya untuk perbatasan ??? ...IYA!!!

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;

Anda mungkin bisa meniru stroke teks, menggunakan css text-shadow(atau -webkit-text-shadow/ -moz-text-shadow) dan blur yang sangat rendah:

#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;
}

Tapi sementara ini lebih banyak tersedia daripada -webkit-text-strokeproperti, saya ragu itu tersedia untuk sebagian besar pengguna Anda, tetapi itu mungkin tidak menjadi masalah (degradasi anggun, dan semua itu).

Untuk menjelaskan lebih lanjut tentang beberapa jawaban yang telah disebutkan -webkit-text-stroke, berikut adalah kode untuk membuatnya berfungsi:

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

Artikel mendalam tentang penggunaan stroke teks ada di sini dan daftar browser yang mendukung stroke teks ada di sini .

Tampaknya ada properti 'text-stroke', tetapi (setidaknya bagi saya) itu hanya berfungsi di Safari.

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

Inilah yang saya gunakan:

.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;
}

Stroke font-karakter dengan Mixin kurang

Berikut adalah mixin KURANG untuk menghasilkan stroke: 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;
}

(ini didasarkan pada jawaban pixelass yang menggunakan SCSS)

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

Saya membuat perbandingan dari semua solusi yang disebutkan di sini untuk mendapatkan gambaran singkat:

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

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

Saya pernah mencoba melakukan sudut-sudut bundar dan menjatuhkan bayangan dengan css3. Kemudian, saya menemukan itu masih kurang didukung (Internet Explorer, tentu saja!)

Saya akhirnya mencoba melakukan itu di JS (kanvas HTML dengan IE Canvas), tetapi itu banyak mempengaruhi kinerja (bahkan pada mesin C2D saya). Singkatnya, jika Anda benar-benar membutuhkan efek, pertimbangkan perpustakaan JS (kebanyakan dari mereka harus dapat berjalan di IE6) tetapi jangan berlebihan melakukannya karena masalah kinerja; jika Anda masih membutuhkan alternatif ... Anda bisa menggunakan SFiR, lalu PS dan SFiR itu. CSS3 tidak siap hari ini.

Maaf saya terlambat, tetapi berbicara tentang bayangan teks, saya pikir Anda juga akan menyukai contoh ini (saya sering menggunakannya ketika saya membutuhkan bayangan yang bagus pada teks):

                    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;
}