如何在Markdown/CSS中强制双宽Unicode符号按双宽显示

问题场景 #

在MacOS系统的Brave浏览器（Chromium 105，2022-09-27版本）中，Markdown代码块内的双宽Unicode字符（比如🟧）渲染异常，会打破等宽网格，没法用来做绘图或游戏渲染；但在iTerm2、VSCode终端这类系统终端里显示正常，推测是Markdown/CSS/HTML层面的字体适配问题。

技术解决方案 #

1. 如何在Markdown代码块中完全控制此类Unicode字符串的宽度？ #

• 用CSS强制等宽对齐（适合自己能控制的页面，比如个人博客、自定义站点）
  给代码块添加font-variant-east-asian: full-width样式，这个属性能让双宽字符强制占两个字符宽度，单宽字符保持一个宽度，完美维持等宽网格。可以用HTML包裹代码块来实现：

  <pre style="font-variant-east-asian: full-width;">
  🟧🟦🟥
  🟩🟧🟦
  </pre>
  

  如果是全局样式，直接给<pre>和<code>标签加这个CSS属性就行：

  pre, code {
    font-variant-east-asian: full-width;
  }
  

• 替换双宽字符为两个单宽字符模拟
  要是没法用CSS，就手动把双宽字符换成两个单宽的字符，比如用两个█代替一个🟧，这样不管在哪种等宽环境下都能对齐。如果需要颜色，可以用支持ANSI颜色的单宽彩色字符来匹配。

2. 有没有其他方法能至少在Github上正常显示？ #

Github不允许自定义CSS，所以得换思路：

• 改用ASCII或单宽Unicode字符绘图
  放弃双宽字符，用#、█这类单宽字符构建图形，Github代码块的等宽字体能保证它们完美对齐。

• 升级浏览器版本
  Chromium后续版本对双宽Unicode字符的渲染支持做了优化，把Brave浏览器更到最新版，大概率能解决渲染异常的问题。

• 用Markdown表格模拟等宽网格
  用表格来搭建网格，每个单元格放一个双宽字符，表格单元格会自动对齐宽度，虽然不是代码块，但能在Github上展示整齐的网格：

  | 🟧 | 🟦 | 🟥 |
  |---|---|---|
  | 🟩 | 🟧 | 🟦 |
  

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