日文字符在 Google Chrome 中显示为其他符号答案

【问题标题】：Japanese characters are showing up as other symbols in Google Chrome日文字符在 Google Chrome 中显示为其他符号
【发布时间】：2023-03-26 23:56:01
【问题描述】：

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

这是它们的所有：ヲァィゥェォャュョッアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン

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

更奇怪的是，如果我将随机渲染的字符复制并粘贴到我的代码编辑器中，它就会变成日语！

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

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

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

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

  let possible = halfWidthKana + numerals;

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

然后随机选择的字符显示在一个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>

【问题讨论】：

这是一个编码问题。您可能需要在 HTML 中指定编码。不同的浏览器可能会对使用哪个做出更好/更差的猜测，因此会有不同的行为。
我的主 html 页面使用 <meta charset="UTF-8" lang="en">。删除它会将随机字符更改为不同的随机字符
这应该足够了。你试过了吗？ <meta charset="utf-8" />
更改了它，我得到了相同的结果
这看起来像 Shift JIS 到 Mac Roman。

标签： javascript google-chrome unicode character mojibake

【解决方案1】：

我也可以在我的 Mac 上重现它。

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

更多细节在https://crbug.com/544402讨论。

【讨论】：

你就是乔希！我将字体系列更改为无衬线字体，一切正常。