Batas Font CSS?

491

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?

Lars Tackmann
sumber

Jawaban:

1004

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.

Narcélio Filho
sumber
4
ini berhasil untuk saya, saya hanya menambahkan 1px "blur": text-shadow: -1px 0 1px hitam, 0 1px 1px hitam, 1px 0 1px hitam, 0 -1px 1px hitam
Jakub M.
84
bagus jika Anda hanya membutuhkan perbatasan 1px. Tapi itu menjadi jelek ketika menggunakan 2px atau lebih.
Jules Colle
2
Catatan: ada bug dengan browser Andriod ( code.google.com/p/android/issues/detail?id=7531 ), jika Anda mengatur "blur" menjadi 0px, maka tidak ada garis besar yang muncul sama sekali.
Mark Rhodes
1
btw, Anda dapat menemukan kode ini di W3C halaman ujung CSS w3.org/Style/Examples/007/text-shadow.en.html (di DRAWING LETTERS AS OUTLINESbagian)
luiges90
Saya telah menemukan ini bekerja paling baik pada latar belakang warna dan jawaban @ pixelass bekerja paling baik dengan latar belakang gambar
SemanticZen
151

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

masukkan deskripsi gambar di sini

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;

sumber
memperbarui kode karena duplikat 0 2px 0 # 000 dan itu - / + elemen. Keburaman (0 sebelum # 000) dapat dihapus tetapi saya cenderung menyimpannya meskipun itu 0. Saya juga harus mencatat bahwa disarankan untuk memiliki versi CSS yang diperkecil atau dikompresi dari kode Anda di situs produksi dan menyimpan versi terkompresi yang dikomentari untuk pengeditan. Kode di atas adalah contoh yang baik mengapa kode CSS harus diperkecil tetapi perlu dipisahkan baris demi baris untuk diedit.
Saya bermain-main dengan properti '-webkit-text-stroke' (terutama untuk membuat font terlihat lebih bagus di jendela UGLY UGLY) Namun ini membuat waktu pemuatan terlalu lama dan bahkan merusak situs saya (mac Chrome 16). Jadi saya menghapusnya lebih cepat daripada yang bisa dimuat halaman. Saya kira ini hanya ditujukan untuk satu baris font saja. (Saya menggunakannya untuk 'tubuh')
1
Sudahkah Anda melakukan pembandingan kinerja dengan ini? Saya menemukan bayangan teks untuk menutup halaman ketika menggulir, misalnya
Chris Bosco
1
Saya telah menemukan ini bekerja paling baik pada latar belakang gambar dan jawaban @ Narcélio Filho bekerja paling baik dengan latar belakang warna
SemanticZen
1
codepen asli "menghilang", jadi saya membuat yang baru dengan kode asli dari posting ini dan juga membuat perbandingan dari solusi lain yang disebutkan di sini codepen.io/Grienauer/pen/GRRdRJr
Grienauer
51

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).

David mengatakan mengembalikan Monica
sumber
3
Perlu dicatat bahwa adalah mungkin untuk sepenuhnya menghilangkan argumen ketiga agar tidak kabur sama sekali.
François Feugeas
23

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 .

Ugtemlhrshrwzf
sumber
11

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;
}
rAthus
sumber
2

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)

Christian Toffolo
sumber
1
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
pengguna2987790
sumber
1

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

Grienauer
sumber
0

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.

xandy
sumber
0

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;
}
Alex Tudor
sumber