为什么我打印？而不是»？

Question

我想展示一下：»，但显示»。为什么要添加Â？为什么它不仅仅是双右箭头？我的代码出了什么问题？

CSS

#buttonServices1{
  transition: all 0.5s;
}


#buttonServices1 span {
  transition:0.5s;
}

#buttonServices1 span:after {
  content: '»';
  transition: 0.5s;
}

#buttonServices1:hover span {
  padding-right: 25px;
}

#buttonServices1:hover span:after {
  opacity: 1;
}

HTML：

<button id="buttonServices1"><span>Services</span></button>

图片：

Answer 1

  

为什么要添加Â？

因为样式表保存为UTF-8，但浏览器使用Windows-1252对其进行解码。这可能是因为引用样式表的页面没有声明的编码，浏览器任意猜测Windows-1252，这通常是西欧语言环境的默认编码。字节序列0xC2 0xBB代表UTF-8中的»，但代表Windows-1252中的»。

在Akjm对引用样式表的页面的答案中添加<meta charset>声明应该可以使它工作。如果你不能这样做（例如，因为你正在制作一个可能被其他人的页面引用的样式表，可能是任何编码），替代方案是：

1. 使用CSS反斜杠转义编码字符，如@ RobFonseca的答案。 （@ Akjm的答案中的HTML字符引用语法在这里无效。）

2. 将规则@charset "utf-8";放在样式表的顶部，告诉浏览器样式表有自己的编码，与页面使用的内容无关

3. 将网络服务器设置为使用HTTP Content-Type: text/css;charset=utf-8标题提供样式表

对方法2-4的支持传统上很不稳定，但我最近没有检查浏览器支持。

Answer 2

可能是角色渲染的渲染错误。

首先，首先要确保在你的头标中你有这样的东西：

<meta charset="utf-8">

然后，尝试使用charcode替换content属性中的字符

content: '»'
/* OR USE THIS */
content: '»'

Answer 3

CSS内容属性要求您使用Unicode十六进制转义

content: '\00bb',

这是一张有用的图表 https://css-tricks.com/snippets/html/glyphs/