是否可以使用CSS顯示替代字符？

Question

我在字形面板中使用的Web字體有幾種不同的“M”可供選擇。 在我的網站上顯示的默認“M”是可怕的。 我想從一個字體的替代字符選擇中使用更好看的“M”。

在字形面板中（在Illustrator中）我想要使用的“M”字符是：U + 004d替代＃2（aalt2）

我目前在我的CSS中有這個：

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

不幸的是，這段代碼並沒有拉出我想要的替代“M”。 它只是拉出了我想要擺脫的默認“M”。

這甚至可以從字體中調用備用“M”，並將其顯示在網頁上嗎？

Answer 1

好的，與004D的字體unicode字符對應的html代碼是“ M ”。 由於您想要將特定“M”的所有出現更改為該特定字符，只需找到該字符的出現並動態添加span標記。

這是一個例子，我用字符“e”而不是“E”做同樣的事情。 我用“ȝ”改了“e”

JSFIDDLE LINK在這里。

 $(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> 

另一種變化是使用@ font-face中的“unicode-range”屬性來指定新字體並將該新字體應用於角色的每個出現。 請參閱此處的MDN文檔 。

這個小提琴可以在這里找到::: http://jsfiddle.net/dka30drt/7/

這里的代碼片段為第二個變體，

 $(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> 

希望這可以幫助

Answer 2

我有點想通了。 這適用於FF，但不適用於Safari。

這是“Meet”一詞中“M”的HTML ，我想改變：

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

這是為我改變那封特定字母的CSS ：

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

專業提示： 如果要生成Web字體，請確保替換實際上是該Web字體。 我有一個沒有替代品的字體版本，因此為什么darn代碼不起作用！

Answer 3

是的，你可以這樣做：

@font-face {
    font-family: 'MyFont';
    src: local('MyFont');
}

@font-face {
    font-family: 'MyFont-Alt';
    font-feature-settings: "salt"; 
    /* Above can vary depending on the font. For example:
        font-feature-settings: "aalt"; 
        font-feature-settings: "ss01";
    */
    src: local('MyFont');
    unicode-range: U+004d,U+004f ; /* Just in case you want more glyphs. */
}

body{
    font-family: 'MyFont-Alt','MyFont';
}