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?
491
DRAWING LETTERS AS OUTLINES
bagian)MEMPERBARUI
Berikut adalah mixin SCSS untuk menghasilkan stroke: http://codepen.io/pixelass/pen/gbGZYL
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!!!
sumber
Anda mungkin bisa meniru stroke teks, menggunakan css
text-shadow
(atau-webkit-text-shadow
/-moz-text-shadow
) dan blur yang sangat rendah:Tapi sementara ini lebih banyak tersedia daripada
-webkit-text-stroke
properti, saya ragu itu tersedia untuk sebagian besar pengguna Anda, tetapi itu mungkin tidak menjadi masalah (degradasi anggun, dan semua itu).sumber
Untuk menjelaskan lebih lanjut tentang beberapa jawaban yang telah disebutkan -webkit-text-stroke, berikut adalah kode untuk membuatnya berfungsi:
Artikel mendalam tentang penggunaan stroke teks ada di sini dan daftar browser yang mendukung stroke teks ada di sini .
sumber
Tampaknya ada properti 'text-stroke', tetapi (setidaknya bagi saya) itu hanya berfungsi di Safari.
http://webkit.org/blog/85/introducing-text-stroke/
sumber
Inilah yang saya gunakan:
sumber
Stroke font-karakter dengan Mixin kurang
Berikut adalah mixin KURANG untuk menghasilkan stroke: http://codepen.io/anon/pen/BNYGBy?editors=110
(ini didasarkan pada jawaban pixelass yang menggunakan SCSS)
sumber
sumber
Saya membuat perbandingan dari semua solusi yang disebutkan di sini untuk mendapatkan gambaran singkat:
https://codepen.io/Grienauer/pen/GRRdRJr
sumber
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.
sumber
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):
sumber