是否可以使用CSS显示替代字符? [英] Is it possible to display an alternate character with CSS?
问题描述
我在字形面板中使用的网页字体有多种不同的M's可供选择。保持显示在我的网站的默认M是可怕的。我想使用更好的M从字体的备用字符选择之一。
在字形面板(在Illustrator中),我要使用的M字符是:U + 004d Alternates#2(aalt2)
我目前在我的CSS中:
.script:before {
content :\004D;不幸的是,这段代码没有拉我想要的替代M。它只是拉出我想要摆脱的默认M。
这是甚至可以从字体调用替代M,并显示它在网页上?
解决方案确定对应于004D的字体unicode字符的html代码是M
。因为你想要改变特定字符M的所有出现的特定字符,只需找到该字符的出现,并在飞行中添加一个span标签。
这里是一个例子,我做了相同的事情与字符e,但不是E。我用ȝ更改了e
$(document).ready(function(){$ .fn.texter = function(){var letters = .html()。split(),text =; for(var i in letters){if(letters [i] ==e){text + =< span class = [i] +'>+'&#541;'+< / span>;} else {text + = letters [i];}} $(this).html ; $(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>输入测试消息EEE
另一种变化形式是使用@ font-face中的unicode-range属性来指定一个新字体,并将该新字体应用于该字符的每一次出现。请参阅此处的MDN文档。
这里的小提琴可以在这里找到::: http://jsfiddle.net/dka30drt/7/
第二个变体的代码段,
$ (function(){$ .fn.texter = function(){var letters = $(this).html()。split(),text = i] +'>+'&#541;'+< / span>;控制台。 log(letters [i]);} else {text + = letters [i]; /*console.log(letters[i]);*/}} $(this).html 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)格式('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。 format.video('svg');msgctxt@info:tooltip 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>此处输入测试消息EEE没有被触摸但是eee已改变< / div>
帮助
I am using a web font that has several different, "M's" to choose from, in the glyphs panel. The default "M" that keeps being displayed in my website is hideous. I would like to use a better looking "M" from one of the font's alternate character choices.
In the glyphs panel (within Illustrator) the "M" character I want to use is: U+004d Alternates#2 (aalt2)
I have this currently in my CSS:
.script:before {
content: "\004D";
}
Unfortunately, this code does not pull the alternate "M" I want. It just pulls the default "M" that I'm trying to get rid of.
Is this even possible to call an alternate "M" from a font, and display it on a web page?
解决方案 Ok the html code that corresponds to the font unicode character of 004D is "M
" . Since you want to change all the occurences of the specifiv "M" to that particular character, just find the occurences of that character and add a span tag on the fly.
Here is an example where I have done the same thing with the character "e" but not "E". I changed "e" with "ȝ"
JSFIDDLE LINK here.
$(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] + "'>" + 'ȝ' + "</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>
Another variation is to use the "unicode-range" attribute in @font-face to specify a new font and apply that new font to every occurence of the character. Refer MDN Documentation here.
The Fiddle for this can be found here ::: http://jsfiddle.net/dka30drt/7/
Code snippet here for the 2nd variation,
$(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] + "'>" + 'ȝ' + "</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>
Hope this helps
这篇关于是否可以使用CSS显示替代字符?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文