我们需要在内部web应用程序中显示一个标记符号(✓或✔),理想情况下希望避免使用图像。

必须从XP盒子上的IE 6.0.2900开始工作,理想情况下我们需要它是跨浏览器的(IE + FF的最新版本)。

下面将显示方框,尽管将浏览器编码设置为UTF-8 (META工作得很好,不是问题)。默认字体是Times New Roman(可能是一个问题,但尝试Lucida Sans Unicode没有帮助,我既没有安装Arial Unicode MS,也没有安装Lucida Grande)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

感谢任何帮助。


在ie6.0和ie7下的工作如下:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

如果有人能在Windows下查看FF,我会很感激。我很确定它不会在非Windows的盒子上工作。


当前回答

我也遇到了同样的问题,但这些建议都不起作用(在Windows XP上使用Firefox)。

所以我发现了一个可能的解决方案,使用图像数据显示一个小的复选标记:

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

当然,您可以创建自己的复选标记图像,并使用转换器将其添加为数据:image/gif。希望这能有所帮助。

其他回答

although设置浏览器编码为UTF-8

(如果你使用的是数字字符引用,当然使用的是什么编码并不重要,浏览器会直接从数字中获得正确的Unicode码点。)

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

如果有人能在Windows下查看FF,我会很感激。我很确定它不会在非Windows的盒子上工作。

我在火狐3、Opera和Safari浏览器上都失败了。奇怪的是,它可以在另一个Webkit浏览器Chrome上运行。在Linux上也失败(显然,因为Wingdings没有安装在那里;它安装在mac上,但如果Safari没有它,这对你没有帮助)。

此外,这是一个相当讨厌的黑客——这个字符在任何意图和目的上都是“ü”,并且会以这种方式出现在搜索引擎上,或者如果文本是复制粘贴的。正确的Unicode码位是正确的选择,除非你真的别无选择。

问题是Windows捆绑的字体中没有U+2713 CHECK MARK('✓')。你在Windows机器上唯一可能找到的是“Arial Unicode MS”,这并不是真正的依赖。所以最后我认为你必须:

使用一个更好支持的不同字符(例如。'●' -子弹,由SO使用),或 使用图像,并将“✓”作为Alt文本。

我很晚才来参加聚会,发现&check;在歌剧院工作。我还没有在其他浏览器上测试它,但它可能对一些人有用。

√(平方根符号,&#8730;)够吗?

或者,确保在将数据发送到浏览器之前设置了Content-Type:头。仅仅指定<meta> content-type标记可能不足以鼓励浏览器使用正确的字符集。

使用WebDing或WingDing字体是实现本主题目标的唯一方法:它必须从IE 6.0.2900开始工作。因此,我将在这里发布一些,以及对上面发布的一些更正:

Cross <span style="font-family: Wingdings;">&#251;</span><br> Check <span style="font-family: Wingdings;">&#252;</span><br> Crossed Checkbox <span style="font-family: Wingdings;">&#253;</span><br> Checked Checkbox <span style="font-family: Wingdings;">&#254;</span><br> Empty Checkbox <span style="font-family: Wingdings;">&#168;</span><br> Thick Check <span style="font-family: Webdings;">&#97;</span><br> Friendly asked in comments <div style="display: inline; font-family: Wingdings; font-size: 15px; background-color: lightblue; border: 2px solid black; padding: 1px 4px 0 2px;">&#252;</div>

参考这里: 闹酒狂欢 webdings

你可以添加一个小的白色的Base64编码GIF(在线生成器在这里):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

以Chrome为例,我用它来设置复选框控件的样式:

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

如果你只是想把它放在IMG标签中,你可以这样做:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">