強制雙倍寬度 unicode 符號在 Markdown 或 CSS 中使用雙倍寬度

Question

我想控制雙寬 unicode 字符的視覺寬度，例如 Github 風味 Markdown 中的LARGE ORANGE SQUARE ； 使用 Markdown 代碼或 Html/CSS。

例如，請參閱以下 Markdown 代碼部分，它在 MacOS（Chromium 105、MacOS 12.6，截至 2022 年 9 月 27 日）中錯誤呈現 Brave 中的字符串：

                        1 3 5 7 9
single width reference  ↓ ↓ ↓ ↓ ↓
double width unicode    🟪🟫🟩🟪🟫🟩🟪🟫🟩
double width reference  ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
                        1 2 3 4 5 6 7 8 9

雙寬字符超出了等寬網格，因此不能在這樣的地方安全地使用，例如用於畫框或游戲渲染。

字符在系統終端中渲染得很好，例如 iTerm2 或下圖所示的 VSCode 終端。

因此，這似乎是 Markdown/CSS/Html 問題，可能與網站使用的 fonts 和一般瀏覽器有關。

問題

1. 如何完全控制 Markdown 代碼部分中此類 unicode 字符串的寬度？
2. 是否有其他解決方法可以使其至少在 Github 上工作？