WebFont非拉丁Unicode字符显示顺序异常排查与解决

问题现象 #

使用基于Unicode字形实现的自定义WebFont时，出现以下显示异常：

• 图标元素（<i class="game-icon game-icon-shield"></i>，对应Unicode字符ﱗ）紧跟0+时，图标会被显示在0和+之间
• 若在0前添加任意英文字母（如a0+），则图标与文本的显示顺序恢复正常
• 直接输入ﱗ0时，图标字符会自动跑到0后方；输入ﱗa0则显示顺序正确

异常显示代码示例 #

<span class="text-stat ng-star-inserted" style="">
  <i class="game-icon game-icon-shield"></i>
  0+
</span>

正常显示代码示例 #

<span class="text-stat ng-star-inserted" style="">
  <i class="game-icon game-icon-shield"></i>
  a0+
</span>

相关WebFont CSS定义 #

.game-icon-shield:before {
    content: "ﱗ";
}
.game-icon:before {
    font-family: "game-icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal !important;
    text-decoration: none;
    text-transform: none;
    line-height: inherit;
}

问题根源 #

这种顺序错乱是浏览器双向文本（BiDi）渲染算法导致的。自定义图标使用的Unicode字符可能被标记为RTL（从右到左）方向属性，当它与LTR（从左到右）方向的数字组合时，浏览器的BiDi算法会自动调整字符排列顺序；而英文字母本身是LTR属性，会强制维持整体文本的LTR流向，因此不会出现顺序异常。单独设置direction: ltr无法解决，因为它仅控制整体文本方向，无法干预BiDi算法对内部字符的重排。

解决方案 #

在图标的基础样式中添加unicode-bidi: plaintext属性，该属性会让元素内的文本按照自身固有方向独立处理，且仅作用于当前图标元素，不会影响全局本地化设置。

修改后的CSS：

.game-icon:before {
    font-family: "game-icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal !important;
    text-decoration: none;
    text-transform: none;
    line-height: inherit;
    unicode-bidi: plaintext; /* 新增属性 */
}

内容的提问来源于stack exchange，提问作者jugglervr