text-strokeAdobe Illustrator veya diğer vektör çizim uygulamalarında bulunanlara benzer metin süsleme seçenekleri sağlayan deneysel bir özelliktir. Şu anda herhangi bir W3C veya WHATWG spesifikasyonuna dahil edilmemiştir. Haziran 2013 itibariyle, yalnızca bir -webkitsatıcı önekinin arkasında uygulanmaktadır , ancak Firefox ve Internet Explorer'ın gelecekteki sürümleri özelliği destekleyebilir (muhtemelen kendi önekleri altında).
mark ( -webkit-text-stroke: 2px red; )text-strokeMülkiyet aslında iki diğer özellikleri için kısaltmadır:
text-stroke-widthbirim değerini (1px, 0.125em, 4in, vb.) alan ve vuruş efektinin kalınlığını açıklayan.text-stroke-color, bir renk değeri alır (hex, rgb / rgba, hsl / hsla, vb.).
text-strokeayrıca özelliği text-fill-colorgeçersiz kılacak ve colordesteklemeyen tarayıcılarda farklı bir metin rengine zarif bir geri dönüşe olanak tanıyan bir tamamlayıcı özelliğe sahiptir text-stroke.
İlgi noktaları
- Çizen kontur
text-stroke, metin şeklinin ortasına hizalanır (Adobe Illustrator'da varsayılan olduğu gibi) ve şu anda hizalamayı şeklin içine veya dışına ayarlama seçeneği yoktur. Ne yazık ki bu, onu çok daha az kullanışlı hale getiriyor, çünkü şimdi vuruş, orijinal tip tasarımcılarının niyetini yok eden harfin şekline müdahale ediyor. Bir ortam ideal olurdu, ancak birini seçmek zorunda olsaydık, dış vuruş çok daha yararlı olurdu. - Webkit'te,
text-strokeCSS Geçişleri ve Animasyonlarıyla canlandırılabilir - ancak yalnızca kontur rengi, kontur genişliği değil. - Bu CSS-Püf Noktaları makalesinde özetlenen,
text-strokeefekt için daha tarayıcı uyumlu (ve muhtemelen daha sağlam) bir stand-in kullanıyortext-shadow.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Karmaşık | -webkit- |
Tarayıcı desteğiyle ilgili bir not: Yukarıdaki tablo, genel tarayıcı desteğinin bir özetidir text-stroke- gerçek çok daha karmaşıktır (örneğin, Android özelliği 2.1-2.3 sürümlerinde desteklemiş, ardından 4.0'da desteği geri yüklemeden önce 3.0'da desteği kaldırmıştır) . Tam tarayıcı desteği tablosu için caniuse.com/text-stroke adresini ziyaret edin.