针对特定字符使用替代字体

Question

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

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

这很好用。唯一的问题是：由于Meiryo是一种日本字体，因此\的代码点为¥。这会导致类似¥o/或¯¥_(ツ)_/¯的表情符号出现问题。

我想尝试使用@font-face和unicode-range来实验，即使Meiryo处于活动状态，也能使用Verdana的\。

我已经尝试了以下各种组合：

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

我...有时候真的不知道它在做什么。看起来似乎仍在使用Meiryo，但粗体文本全部显示错误，基线已经改变，这反过来会影响行高和整个页面的布局，引起一系列连锁反应。

我觉得最好还是像服务器端那样使用“replace \ with <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("/"));
        }
    }
})();

基本上，将文本节点中的反斜杠替换为水平镜像的正斜杠。它能够运行，但具体效果因人而异。

- Niet the Dark Absol

---

还有这种事情？！O_o 我以为这是Windows代码页等方面的错误，已经被适当的Unicode代码点取代了... - deceze

<meta charset='utf-8'> 可能是吗？ - zer00ne

@zer00ne 没有运气 - 响应头已经包含 Content-Type: text/html; charset=utf-8 了。 - Niet the Dark Absol

我已经使用一个“解决方法”更新了问题，但它似乎并不是很好XD。 - Niet the Dark Absol

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字体缺失反斜杠字符的字形，引擎尝试通过下一个备选字体Verdana来渲染“\”。

- user943702

---

这似乎与我的尝试相同，并导致加粗文本变得奇怪。 - Niet the Dark Absol

@Niet the Dark Absol，区别在于你为Meiryo选择了反斜线（\），而在你的情况下应该取消选择... - user943702