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

Question

我使用的web字体在字形面板中有几个不同的“M”可供选择。默认的"M“一直显示在我的网站是丑陋的。我想从字体的备选字符中选择一个更好看的"M“。

在字形面板中(在Illustrator中)，我要使用的"M“字符是: U+004d Alternates#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 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>

​

希望这能有所帮助

Answer 2

我有点想通了。这在FF中有效，但在Safari中不起作用。

这是我想要更改的单词'Meet‘中"M“的超文本标记语言：

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

这是为我更改了特定字母的CSS：

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

专业提示：如果你正在生成网页字体，请确保备用字体实际上是该网页字体。我有一个版本的字体没有备用字体，所以为什么这个该死的代码不能工作！

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';
}