日语字符在 Google Chrome 中显示为其他符号

Question

我有一个非常简单的 JavaScript 应用程序，它必须呈现一些日语字符（特别是半角假名）。

这是全部：对不起，对不起，对不起，对不起。

但是，当它们呈现在屏幕上时，它们会显示为其他随机字符，如下所示。

更奇怪的是，如果我将随机呈现的字符复制并粘贴到我的代码编辑器中，它会变回日文！

我知道 Chrome 能够呈现日文字符，因为当我输入这个问题时，我现在可以看到它正在这样做。所以，我完全不知道为什么会这样发生在我的程序中。

Firefox 似乎没有这个问题，但 Safari 有。

这是我的代码。我有一个字符串中的所有字符，我随机 select 显示一个（出于艺术目的）。

let randomChar = function() {
  const halfWidthKana = "ｦｧｨｩｪｫｬｭｮｯｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ";
  const numerals = "0123456789";

  let possible = halfWidthKana + numerals;

  return possible.charAt(Math.floor(Math.random() * possible.length));
};

然后随机 selected 字符显示在 li 标签内

let li = document.createElement("li");
li.appendChild(document.createTextNode(randomChar()));

这是我的应用程序围绕的唯一 HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Japanese Text</title>
        <meta charset="utf-8" />
        <meta name="google" value="notranslate">
        <link rel="stylesheet" href="styles.css">
        <script src="generate.js"></script>
        <script src="Column.js"></script>
    </head>
    <body>
        <div id="lines"></div>
    </body>
</html>

Answer 1

我也可以在我的 Mac 上复制它。

Chrome 的检查器显示正在使用字体 "Songti SC"。切换到不同的字体可以解决此问题。

更多详细信息在 https://crbug.com/544402 中讨论。

日语字符在 Google Chrome 中显示为其他符号

Japanese characters are showing up as other symbols in Google Chrome

javascript

unicode

google-chrome

character

mojibake