html - 为什么在设置按钮 :after { content }? 时随机得到字符串 "Ã-"而不是 "×"

Question

我正在使用以下 css 设置将删除标签的按钮的文本:

button.close:after {
  content: '×';
}

这会产生一个像这样的好看的按钮:

但随机字符串 × 被字符串 Ã- 替换。我首先认为这可能与编码有关，但如果确实是问题所在，我认为这不会随机发生。它发生的频率很低，目前还没有发生(一旦再次发生，将用另一个打印屏幕更新问题)。

此 css 代码来自一个 .less 文件，我正在编译该文件，然后对其进行缩小，然后进行连接。

如何确保字符串×一直显示？

Answer 1

multiplication character具有 UTF-8 序列 0xC3 0x97。当使用 Windows-1252 character set 解码时相反，它变成了 ×(A tilde，em dash)。

因此，问题确实在于 CSS 被解码为 Windows-1252 而不是 UTF-8。 CSS 通常以与 HTML 文档相同的方式解码，因此页面和 HTTP header 中似乎都没有字符集规范 netier。这迫使浏览器猜测编码是什么。由于浏览器使用任何可用数据进行猜测(并且浏览器之间的算法不同)，猜测可能会有所不同，具体取决于缓存中已经有多少页面和相关文件。

在 HTML 头部指定页面的编码:

<meta charset="utf-8">

您还可以通过在顶部添加此代码来专门为 CSS 文件指定编码，但仅当它与页面编码不同时才需要:

@charset "utf-8";