为特定字符使用替代字体

Posted 2023-03-05

【中文标题】为特定字符使用替代字体

【英文标题】：Use alternative font for specific character

【发布时间】：2018-05-19 03:18:45

【问题描述】：

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

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

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

【问题讨论】：

这还是个东西？！ O_o 我认为这是 Windows 代码页等中的一个错误，已被适当的 Unicode 代码点淘汰……

<meta charset='utf-8'> 也许？

@zer00ne 不走运 - 响应标头已经包含 Content-Type: text/html; charset=utf-8 反正。

我已经用“解决方法”更新了这个问题，看起来不太好 XD

【参考方案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 呈现“\”。

【讨论】：

这似乎和我的尝试一样，并导致粗体文本很奇怪。

@Niet the Dark Absol，差异。是您选择了 meiryo 的“\”，而应该选择退出您的案例...