在内联CSS

Question

我在一个元素中加入内联CSS，在弹出叠加层上呈现一个close（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";
 }

两个问题：

1. 是否有可以在CSS内容类型中使用的关闭图标（X）的HTML等价物？无论编码如何，它都会以相同的方式呈现吗？

2. 我是否可以仅为此类强制使用内联CSS中的UTF-8编码？我无法控制驻留在第三方服务器上的其余页面。

3. 我可以在::before选择器中使用BASE64图像吗？如果是这样，我该怎么做？

Answer 1

您可以使用@charset "UTF-8";

在css文件的开头设置编码

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

Answer 2

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

The CSS syntax for Unicode characters does not include the u prefix. The correct syntax is: content:"\00D6"; or simply content:"\D6";. This character notation always refers to a Unicode Codepoint regardless of the character encoding of the (HTML) document that contains it.

However, the character "\00D6" refers to the Unicode character

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

This is likely to display badly if you expected it to display a cross. Perhaps you meant to use "\00D7":

• × (U+00D7 MULTIPLICATION SIGN)

In other words, your code should read:

.close::before {
  content: "\00D7";
}

Answer 3

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

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