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

我在字形面板中使用的Web字体有几种不同的“M”可供选择.在我的网站上显示的默认“M”是可怕的.我想从一个字体的替代字符选择中使用更好看的“M”.

在字形面板(在Illustrator中)中,我想使用的“M”字符是：U 004d替代#2(aalt2)

我目前在我的CSS中有这个：

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

不幸的是,这段代码并没有拉出我想要的替代“M”.它只是拉出了我想要摆脱的默认“M”.

这甚至可以从字体中调用备用“M”,并将其显示在网页上吗？

解决方法

好的,与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 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] + "'>" + '&#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>

希望这可以帮助