强制内联 UTF-8 编码 CSS

Question

我在一个元素中进行了内联 CSS 加载，该元素在弹出窗口叠加层上呈现关闭 (X) 图标。当在非 UTF-8 的页面上呈现时，使用本地字符呈现的效果很差。

代码如下：

.close{
  position:absolute;
  top:-14px;
  right:-13px;
  cursor:pointer;
  color: #fff;
  border: 1px solid #918686;
  border-radius: 30px;
  background: #575757;
  font-size: 25px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 13px 6px;
  font-family: "Times Roman", times, serif;
}

.close::before{
  content:"\u00D6";
 }

两个问题：

我可以在 CSS 内容类型中使用与关闭图标 (X) 等效的 HTML 吗？无论编码如何，它都会以相同的方式呈现吗？
我能否仅针对此 class 强制在内联 CSS 中使用 UTF-8 编码？我无法控制驻留在第 3 方服务器上的页面的其余部分。
我可以在 ::before 选择器中使用 BASE64 图像吗？如果可以，我该怎么做？

Answer 1

您可以在 css 文件的开头使用 @charset "UTF-8";

设置编码

对于 base64 图像，您可以像这样使用内容属性： content: url("data:image/png;base64,abc...")

Answer 2

在 .close{ 上方添加 @charset "UTF-8";。

如果您在 html 标签内使用内联 css，则不能使用它，因为 @charset 不是样式规则集的一部分。

Answer 3

.close::before{
  content:"\u00D6";
}

Unicode 字符的 CSS 语法不包括 u 前缀。正确的语法是：content:"[=13=]D6"; 或简单的 content:"\D6";。无论包含它的 (HTML) 文档的字符编码如何，此字符表示法始终引用 Unicode 代码点。

但是，字符"[=15=]D6"指的是Unicode字符

Ö (U+00D6 LATIN CAPITAL LETTER O WITH DIAERESIS)

如果您希望它显示十字，则可能显示效果不佳。也许你打算使用 "[=17=]D7":

× (U+00D7 MULTIPLICATION SIGN)

换句话说，您的代码应为：

.close::before {
  content: "[=11=]D7";
}

强制内联 UTF-8 编码 CSS

Force UTF-8 encoding in inline CSS

css

encoding

utf-8