我使用的网络字体有几种不同的," M""在字形面板中进行选择。默认" M"一直在我的网站上显示是可怕的。我想用一个更好看的" M"来自其中一个字体的替代字符选择。
在字形面板中(在Illustrator中)" M"我想使用的角色是:U + 004d替代#2(aalt2)
我目前在CSS中有这个:
.script:before {
content: "\004D";
}
不幸的是,这段代码没有拉动候补" M"我想要。它只是拉出默认值" M"我试图摆脱它。
这甚至可以称为替代" M"从字体,并将其显示在网页上?
答案 0 :(得分:7)
好的,与004D的字体unicode字符对应的html代码是“M
”。由于您希望将特定“M”的所有出现更改为该特定字符,只需找到该字符的出现并动态添加span标记。
这是一个例子,我用字符“e”而不是“E”做同样的事情。我用“ȝ”改变了“e”
$(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>
另一种变体是使用@ font-face中的“unicode-range”属性来指定新字体并将该新字体应用于角色的每个出现。请参阅MDN Documentation here。
这个小提琴可以在这里找到::: 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] + "'>" + 'ȝ' + "</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>
希望这有帮助
答案 1 :(得分:0)
我有点想通了。这适用于FF,但不适用于Safari。
这是“Meet”一词中“M”的 HTML ,我想要更改:
<span class="m-alternate">M</span>eet
这是 CSS ,它改变了我的特定字母:
.m-alternate {
font-feature-settings: "ss02";
}
专业提示: 如果您要生成网络字体,请确保替代项实际上是该网络字体。我有一个没有替代品的字体版本,因此为什么darn代码无效!
答案 2 :(得分:0)
是的,您可以这样做:
@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';
}