在内联CSS中强制使用UTF-8编码

I have inline CSS loading within an element which renders a close (X) icon on a popup overlay. When rendered on a page which is not in UTF-8 it is rendered badly with local characters instead.

我在一个元素中有内联CSS加载,在弹出叠加层上呈现一个关闭(X)图标。当在不是UTF-8的页面上呈现时,它会被本地字符渲染得很糟糕。

Code is as follows:

代码如下:

.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";
 }

Two questions:

Is there an HTML equivalent of a close icon (X) that I can use in the CSS content type? And will it be rendered the same way regardless of encoding?

我可以在CSS内容类型中使用HTML等效的关闭图标(X)吗?无论编码如何,它都会以相同的方式呈现吗?
Can I force UTF-8 encoding in the inline CSS only for this class? I do not have control over the rest of the page which resides on 3rd party server.

我是否可以仅为此类强制使用内联CSS中的UTF-8编码?我无法控制驻留在第三方服务器上的其余页面。
Can I use a BASE64 image in the ::before selector? If so, how do I do it?

我可以在:: before选择器中使用BASE64图像吗?如果是这样,我该怎么办?

3 个解决方案

#1

.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.

Unicode字符的CSS语法不包含u前缀。正确的语法是:content:“\ 00D6”;或只是内容:“\ D6”;。无论包含它的(HTML)文档的字符编码如何,此字符表示法始终引用Unicode代码点。

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

但是,字符“\ 00D6”指的是Unicode字符

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

Ö(U + 00D6带有DIAERESIS的拉丁文大写字母O)

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

如果您希望它显示十字形,则可能会显示严重。也许你打算使用“\ 00D7”:

× (U+00D7 MULTIPLICATION SIGN)

×(U + 00D7乘法标志)

In other words, your code should read:

换句话说,您的代码应为:

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

#2

you can set the encoding at the beginning of your css file with @charset "UTF-8";

您可以使用@charset“UTF-8”在css文件的开头设置编码;

for the base64 image you can use the content property like so: content: url("data:image/png;base64,abc...")

对于base64图像,您可以使用内容属性,如下所示:content:url(“data:image / png; base64,abc ...”)

#3

Add the @charset "UTF-8"; on top above .close{.

添加@charset“UTF-8”;在上面.close {。

If you are using inline css inside html tag, you cannot use it, as @charset is not part of a style rule set.

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

#1

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