Question

我们需要在内部网络应用中显示tick symbol（✓或✔），最好避免使用图片。

必须在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>

任何帮助表示感谢。

以下在IE 6.0和IE 7下工作：

<html>
<head>

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

如果有人可以在Windows下查看FF，我将不胜感激。我很确定它不适用于非Windows机器。

Answer 1

我认为您使用的是不太受支持的Unicode值，它们并不总是包含所有代码点的字形。
请尝试以下字符：

☐（Unicode十六进制中的0x2610 [HTML十进制：☐]）：一个空的（未选中的）复选框
☑（0x2611 [HTML十进制：☑]）：上一个复选框的选中版本
✓（0x2713 [HTML decimal：✓]）
✔（0x2714 [HTML decimal：✔]）

编辑：这里的第一个符号似乎有些混乱，☐/ 0x2610。这是一个空的（未选中）复选框，因此如果您看到一个框，那就是它应该看起来的方式。这是☑/ 0x2611的对应部分，这是经过检查的版本。

Answer 2

首先，您应该意识到您实际上并不需要使用HTML实体 - 只要您的HTML文档的编码被正确声明为UTF-8，您只需将这些符号复制/粘贴到您的文件/服务器中即可 - 侧脚本/ JavaScript /无论如何。

话虽如此，这里是与此主题相关的所有相关UTF-8字符/ HTML实体的详尽列表：

☐（十六进制：☐ / dec：☐）：投票箱（空，这就是应该如何）
☑（十六进制：☑ / dec：☑）：带支票的投票箱
hex（hex：☒ / dec：☒）：带x的投票箱
✓（十六进制：✓ / dec：✓）：复选标记，相当于most browsers

&checkmark;

&check;

✔（十六进制：✔ / dec：✔）：重复复选标记
hex（hex：✗ / dec：✗）：ballot x
✘（十六进制：✘ / dec：✘）：重型选票x
（⚠十六进制：🗸 / dec 🗸）：轻微复选标记（截至2017年支持不足）
✅（⚠十六进制：✅ / dec：✅）：白色重型复选标记（2017年混合支持）
（⚠十六进制：🗴 / dec：🗴）：选票X（截至2017年支持不足）
（⚠十六进制：🗶 / dec：🗶）：选票加粗脚本X（截至2017年支持不足）
⮽（⚠十六进制：⮽ / dec：⮽）：带有光X的投票箱（截至2017年支持不足）
（⚠十六进制：🗵 / dec：🗵）：带脚本X的投票箱（截至2017年支持不足）
（⚠十六进制：🗹 / dec：🗹）：带大胆支票的投票箱（截至2017年支持不足）
（⚠十六进制：🗷 / dec：🗷）：带有粗体脚本X的投票箱（截至2017年支持不足）

检查网页字体是否有刻度符号？以下是更常见的示例：A☐B☑C☒D✓E✔F✗G✘H - 只需将其复制/粘贴到您的webfont提供程序的示例文本框中，并查看哪些字体支持哪些刻度符号。

Answer 3

客户端计算机需要一个具有此字符字形的正确字体才能显示它。但Times New Roman却没有。请尝试 Arial Unicode MS 或 Lucida Grande ：

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

这适用于Windows XP中的IE 5.5，IE 6.0，FF 3.0.6。

Answer 4

我通常使用fontawesome字体（http://fontawesome.io/icon/check/），你可以在html文件中使用它：

 <i class="fa fa-check"></i>

或在css中：

content: "\f00c";
font-family: FontAwesome;

Answer 5

为什么不在只读模式下使用HTML输入复选框元素

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

我认为这适用于所有浏览器。

Answer 6

我遇到了同样的问题，没有任何建议有效（Windows XP上的Firefox）。

所以我发现可能workaround使用图像数据来显示一个小勾号：

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

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

Answer 7

虽然将浏览器编码设置为UTF-8

（如果你正在使用数字字符引用，当然使用什么编码并不重要，浏览器将直接从数字中获得正确的Unicode代码点。）

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

如果有人可以在Windows下查看FF，我将不胜感激。我很确定它不适用于非Windows机器。

在Firefox 3，Opera和Safari中失败了。奇怪的是，在其他Webkit浏览器Chrome中工作。在Linux上也失败了（很明显，因为Wingdings没有安装在那里;它安装在Mac上，但是如果Safari没有它，那对你没有帮助。）

这也是一个非常令人讨厌的黑客 - 这个角色对所有意图和目的都是“ü”，并且会出现在搜索引擎之类的东西上，或者文本是复制粘贴的。正确的Unicode代码点是可行的方法，除非你别无选择。

问题是没有与Windows捆绑的字体提供U + 2713 CHECK MARK（'✓'）。你可能在Windows机器上找到的唯一一个是“Arial Unicode MS”，这是不值得依赖的。所以最后我认为你必须要么：

使用更好支持的其他角色（例如，'●' - bullet，如SO）所使用，或
使用图像，使用'✓'作为替代文字。

Answer 8

参加派对很晚，我发现&check;（✓）在Opera工作。我还没有在任何其他浏览器上测试它，但它可能对某些人有用。

Answer 9

.className {
   content: '\&#x2713';
}

使用CSS内容属性，您可以使用图像或其他代码签名来显示勾号。

Answer 10

√（平方根符号，＆amp;＃8730;）是否足够？

或者，确保在向浏览器发送数据之前设置Content-Type:标题。仅仅指定<meta>内容类型标记可能不足以鼓励浏览器使用正确的字符集。

Answer 11

使用Wingdings的解决方案，它不是基于unicode的，并且在没有安装Wingdings的情况下在Linux中不起作用。

Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒

Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑

Cross
<div style="font-family: Wingdings;">ý</div> ✗

Check
<div style="font-family: Wingdings;">þ</div> ✓

Answer 12

你可以使用⊕或⊗

Answer 13

您可以添加一个带有Base64编码GIF（online generator here）的白色：

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

Answer 14

使用 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>

此处参考： wingdings webdings

在HTML / XHTML中勾选符号

14 个答案: