CSS ile alternatif bir karakter görüntülemek mümkün mü?

Question

Glif panelinde, seçim yapabileceğiniz birkaç "M" harfi olan bir web yazı tipi kullanıyorum. Web sitemde görüntülenmeye devam eden varsayılan "M" iğrenç. Yazı tipinin alternatif karakter seçeneklerinden birinden daha iyi görünen bir "M" kullanmak istiyorum. Ben kullanmak istiyorum "M" karakteri (Illustrator içinde) glifleri panelinde

: U + 004D Alternatifler 2. (aalt2)

Şu anda benim CSS bu var:

.script:before { 
content: "\004D"; 
} 

Maalesef, bu kod istediğim alternatif "M" yi çekmiyor. Sadece kurtulmaya çalıştığım varsayılan "M" yi çekiyor.

Bu, yazı tipinden alternatif bir "M" çağırmak ve bir web sayfasında görüntülemek mümkün mü?

Answer 1

004D'nin font unicode karakterine karşılık gelen html kodunu "M" şeklinde tamamlayın. Bu özel karaktere özgü "M" nin tüm oluşumlarını değiştirmek istediğinizden, sadece o karakterin olaylarını bulup anında bir yayılma etiketi ekleyiniz.

"e" karakteriyle aynı şeyi yaptığım, ancak "E" harfinin olmadığı bir örnek. Burada "e" "ȝ"

JSFIDDLE LINK ile değiştirdim.

$(document).ready(function() { 
 
    $.fn.texter = function() { 
 
    var letters = $(this).html().split(""), 
 
     text = ""; 
 

 
    for (var i in letters) { 
 
     if (letters[i] == "e") { 
 
     text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>"; 
 
     } else { 
 
     text += letters[i]; 
 
     } 
 
    } 
 
    $(this).html(text); 
 
    }; 
 

 
    $("body").texter(); 
 
});

.e { 
 
    color: magenta; 
 
    font-family: 'Arial'; 
 
    font-size: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div>

Başka bir varyasyon yeni bir yazı tipi belirtmek ve karakter her olayın gerçekleşmiş o yeni bir yazı tipi uygulamak için @ font-face "unicode menzilli" ayrıntısını kullanmaktır. MDN Documentation here'a bakın.

Bunun

Fiddle burada bulabilirsiniz ::: 2 varyasyon için buraya http://jsfiddle.net/dka30drt/7/

Kod pasajı,

$(document).ready(function() { 
 
    $.fn.texter = function() { 
 
    var letters = $(this).html().split(""), 
 
     text = ""; 
 

 
    for (var i in letters) { 
 
     if (letters[i] == "e") { 
 
     text += "<span class='" + letters[i] + "'>" + '&#541;' + "</span>"; 
 
     console.log(letters[i]); 
 
     } else { 
 
     text += letters[i]; 
 
     /*console.log(letters[i]);*/ 
 
     } 
 
    } 
 
    $(this).html(text); 
 
    }; 
 

 
    $("body").texter(); 
 
});

@font-face { 
 
    font-family: funkyfont; 
 
    src: url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.eot?#iefix) format('embedded-opentype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.woff) format('woff'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.ttf) format('truetype'), url(https://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/webfontkit/alegreyasc-italic-webfont.svg#svgFontName) format('svg'); 
 
    unicode-range: U+004D; 
 
} 
 
.e { 
 
    color: magenta; 
 
    font-family: 'funkyfont'; 
 
    font-size: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="text">Test Message is Entered Here EEE is not touched but eee is changed</div>

Umut bu tür

Answer 2

Ben yardımcı olur onu anladım. Bu FF'de çalışıyor, ancak Safari'de değil. Bu benim için söz konusu mektubu değişti CSS olduğunu

<span class="m-alternate">M</span>eet 

:

Bu

Değişmek istiyorum, kelimenin 'Meet' in "M" için HTML olduğunu

.m-alternate { 
font-feature-settings: "ss02"; 
} 

Profesyonel İpucu: bir web yazı ürettiğini olursa, alternatifleri o web yazı aslında olduğundan emin olun. Ben alternatifleri yoktu yazı tipinin bir sürümü vardı, bu nedenle neden darn çalışma değildi!