对特定字符使用替代字体

Question

我们目前正在使用以下字体规则:

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

这很好用.只有一个问题:由于Meiryo是日语字体,代码点\是¥.这会导致像¥o/或等表情符号出现问题¯¥_(?)_/¯.

即使Meiryo活跃,我也想尝试@font-face和unicode-range使用Verdana \.

我尝试了以下各种组合:

@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 现在缺少反冲字符的字形，引擎尝试通过下一个后备字体 verdana 渲染“\”。