[英]Is it possible to display an alternate character with CSS?
I am using a web font that has several different, "M's" to choose from, in the glyphs panel. 我在字形面板中使用的Web字体有几种不同的“M”可供选择。 The default "M" that keeps being displayed in my website is hideous.
在我的网站上显示的默认“M”是可怕的。 I would like to use a better looking "M" from one of the font's alternate character choices.
我想从一个字体的替代字符选择中使用更好看的“M”。
In the glyphs panel (within Illustrator) the "M" character I want to use is: U+004d Alternates#2 (aalt2) 在字形面板中(在Illustrator中)我想要使用的“M”字符是:U + 004d替代#2(aalt2)
I have this currently in my CSS: 我目前在我的CSS中有这个:
.script:before {
content: "\004D";
}
Unfortunately, this code does not pull the alternate "M" I want. 不幸的是,这段代码并没有拉出我想要的替代“M”。 It just pulls the default "M" that I'm trying to get rid of.
它只是拉出了我想要摆脱的默认“M”。
Is this even possible to call an alternate "M" from a font, and display it on a web page? 这甚至可以从字体中调用备用“M”,并将其显示在网页上吗?
Ok the html code that corresponds to the font unicode character of 004D is " M
" . 好的,与004D的字体unicode字符对应的html代码是“
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. 由于您想要将特定“M”的所有出现更改为该特定字符,只需找到该字符的出现并动态添加span标记。
Here is an example where I have done the same thing with the character "e" but not "E". 这是一个例子,我用字符“e”而不是“E”做同样的事情。 I changed "e" with "ȝ"
我用“ȝ”改了“e”
JSFIDDLE LINK here. 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] + "'>" + 'ȝ' + "</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. 另一种变化是使用@ font-face中的“unicode-range”属性来指定新字体并将该新字体应用于角色的每个出现。 Refer MDN Documentation here .
请参阅此处的MDN文档 。
The Fiddle for this can be found here ::: http://jsfiddle.net/dka30drt/7/ 这个小提琴可以在这里找到::: 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 希望这可以帮助
I sort of figured it out. 我有点想通了。 This works in FF, but not Safari.
这适用于FF,但不适用于Safari。
This is the HTML for the "M" in the word 'Meet', that I want to change: 这是“Meet”一词中“M”的HTML ,我想改变:
<span class="m-alternate">M</span>eet
This is the CSS that changed that particular letter for me: 这是为我改变那封特定字母的CSS :
.m-alternate {
font-feature-settings: "ss02";
}
Pro Tip: If you are generating a web font, make sure the alternates are actually in that web font. 专业提示: 如果要生成Web字体,请确保替换实际上是该Web字体。 I had a version of the font that did not have the alternates, hence why the darn code wasn't working!
我有一个没有替代品的字体版本,因此为什么darn代码不起作用!
Yes, you can do it this way: 是的,你可以这样做:
@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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.