为特定字符使用替代字体

Question

我们目前使用以下字体规则：

body {
    font-family: Meiryo, Verdana, sans-serif;
}

这很好用。只有一个问题：由于 Meiryo 是一种日文字体，\ 的代码点是¥。这会导致 ¥o/ 或 ¯¥_(ツ)_/¯ 等表情符号出现问题。

我想尝试使用 @font-face 和 unicode-range 来使用 Verdana 的 \，即使在 Meiryo 处于活动状态时也是如此。

我尝试了以下各种组合：

@font-face {
  font-family: Meiryo;
  src: local(Meiryo);
}
@font-face {
  font-family: Meiryo;
  src: local(Verdana);
  unicode-range: U+5C;
}

我...老实说，有时我不知道它在做什么。看起来它仍在使用 Meiryo，但粗体文本完全错误，基线也发生了变化，这反过来又以连锁反应的方式影响了行高和页面的整体布局。

我几乎觉得我最好做一个服务器端“用<span style="font-family: Verdana, sans-serif;">\</span>替换\”之类的事情......

我的任何尝试都是合理的还是我应该尝试其他的事情？

---

这是我想出的“解决方法”：

(function fixBackslashes() {
    var walker = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false),
        node, offset, span;
    while( node = walker.nextNode()) {
        if( node.parentNode.className == 'bs') continue;
        if( (offset = node.nodeValue.indexOf('\\')) > -1) {
            node = node.splitText(offset);
            node.splitText(1);
            span = document.createElement('span');
            span.className = 'bs';
            span.style.cssText = // TODO: Move this to stylesheet
                "display:inline-block;" +
                "text-decoration:inherit;" +
                "transform:scaleX(-1);";
            node.parentNode.replaceChild(span,node);
            span.appendChild(document.createTextNode("/"));
        }
    }
})();

基本上，将文本节点中的反斜杠替换为水平镜像的正斜杠。它有效，对于“有效”这个词的一些定义。

Answer 1

@font-face {
  font-family: Meiryo;
  src: local(Meiryo);
  unicode-range: U+0-5B, U+5D-10FFFF; /*exclude U+5C (the backlash)*/
}
body {
  font-family: Meiryo, Verdana, sans-serif; 
} 

由于 meiryo 现在缺少 backlash 字符的字形，引擎会尝试通过下一个备用字体 verdana 呈现“\”。