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，但是粗体文字都是错误的并且基线已经改变，这反过来又会影响线条高度和页面的整体布局。

我几乎觉得我最好不要做服务器端＆＃34;将\替换为<span style="font-family: Verdana, sans-serif;">\</span>＆＃34;有点事......

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

这是＆＃34;解决方法＆＃34;我想出了：

(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("/"));
        }
    }
})();

基本上，使用水平镜像的正斜杠替换文本节点中的反斜杠。它有效，对于单词＆＃34; work＆＃34;的一些定义。

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现在缺少反射字符的字形，引擎会尝试渲染＆＃39; \＆＃39;通过下一个后备字体，verdana。

对特定字符使用替代字体

1 个答案: