CSS tarafından oluşturulan içerikte Unicode Tamamlayıcı Özel Kullanım karakterleri nasıl yerleştirilir?

Simgeler için bir webfont kullanıyorum. SonraCSS tarafından oluşturulan içerikte Unicode Tamamlayıcı Özel Kullanım karakterleri nasıl yerleştirilir?

<div class="icon" data-icon="&#xF005A;"></div>

Ve:

.icon::before { 
    font-family: IconFont; 
    content: attr(data-icon) 
}

Ben veriye aracılığıyla CSS içine karakterleri geçirirseniz simge glifleri Unicode'un Tamamlayıcı Özel Kullanım eşlenir Alan-A & B.

Herşey * niteliklerini çalışıyor

Ama CSS doğrudan kaçan karakteri gömmek çalışırsanız ...

.icon::before { 
    font-family: IconFont; 
    content: '\0F005A '; 
}

Eksik bir sembol soru işareti olarak görünür.

Ama farklı bir özel karakter çalışırsanız ...

.icon::before { 
    font-family: IconFont; 
    content: '\F8FF '; 
}

iyi çalışır!

Bu özelliğin mümkün olmadığını belirten bir şey bulamıyorum ... Sadece işe yaramıyor.

Bunun hakkında herhangi bir fikrin var mı?

kaynak

2012-03-28 Adam

Aynı sorunu yaşıyorum, ancak sorun yalnızca webkit tarayıcılarında kendini gösterir. IE ve Firefox'ta iyi çalışıyor. Chrome, Safari veya Mobil Safari'de çalışmaz. –

Gerçek bir çözüm değil, bazı normal karakterleri 'normal' karakter kodlarıyla eşleştirerek taviz verdim. Bu, ilgili Unicode karakterleri olan geri/ileri okları, onay işaretleri vb. Karakterler için iyi olmalıdır. Ekran okuyucularının karakter isimlerini konuşabileceğine inanıyorum - yani "Checkmark" - (test edilmemiş) ama bununla yaşayabiliyorum. – Adam

Sorunu '\ F000' ile başlayan aralığı kullanarak düzelttik. En azından webkit bu sorunu çözene kadar veya başka bir çözüm bulmaya çalışsak. Bu menzil ekran okuyucularla iyi görünüyor ama ben en-US dilinin dışında test etmedim. –

Simge yazı tipinizi Özel Kullanım Alanı ile eşlemek için Icomoon'u ziyaret edin. Yazı tipini indirdiğinizde, keyamoon özel karakterleri görüntülemek için iki yönteme sahip html sağladı.

Yöntem 1 (from CSS-tricks) ve Icomoon indirme dahil:

<i aria-hidden="true" data-icon="&#xe000;"></i> 

...... 

[data-icon]:before { 
    font-family: 'icomoon'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
}

Yöntem 2 from Icomoon: Gerçekten html için herhangi bir etiketi kullanabilirsiniz

<span aria-hidden="true" class="icon-pencil"></span> 

...... 

.icon-pencil, .icon-folder { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
.icon-pencil:before { 
    content: "\e000"; 
} 
.icon-folder:before { 
    content: "\e001"; 
}

; CSS-tricks'teki yorumlardan biriyle, italik etiketin html5'te yeniden tanımlandığından, en iyi semantik olabileceğini kabul ediyorum. Ben sadece ikon için seviyorum.

kaynak

2013-04-09 18:06:49

CSS tarafından oluşturulan içerikte Unicode Tamamlayıcı Özel Kullanım karakterleri nasıl yerleştirilir?

cevap

İlgili konular