HTML/XHTML中的勾选符号

Question

HTML/XHTML中的勾选符号

294

我们需要在一个内部网页应用程序中显示一个勾号符号（✓或✔），并希望避免使用图像。

必须从IE 6.0.2900开始工作在XP框，最好能跨浏览器（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 的计算机上无法运行。

- Totophil

1

一个打勾符号应该长什么样？ - John Feminella

3

Sam，请查看这个问题。 - Vlad Gudim

这里有两个：http://amp-what.com/#q=check%20mark&#x2713 &#x2714 - ndp

@John：tick = 对勾 - BobRodes

Wingdings的解决方案在Chrome中运行良好，更重要的是被我们的HTML转PDF生成器所理解。 - zzapper

显示剩余3条评论

14个回答

289

首先，你应该意识到你实际上不需要使用HTML实体 - 只要你的HTML文档编码被正确地声明为UTF-8，你可以直接复制/粘贴这些符号到你的文件/服务器端脚本/JavaScript/等等中。

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

☐ (十六进制：☐ / 十进制：☐）：空白投票箱（应该是这样的）
☑ (十六进制：☑ / 十进制：☑）：带有勾选的投票箱
☒ (十六进制：☒ / 十进制：☒）：带有叉号的投票箱
✓ (十六进制：✓ / 十进制：✓）：勾选标记，等同于大多数浏览器中的 &checkmark; 和 &check;
✔ (十六进制：✔ / 十进制：✔）：重型勾选标记
✗ (十六进制：✗ / 十进制：✗）：投票叉号
✘ (十六进制：✘ / 十进制：✘）：重型投票叉号
(⚠ 十六进制：🗸 / 十进制：🗸）：轻型勾选标记（截至2017年，支持性较差）
✅ (⚠ 十六进制：✅ / 十进制：✅）：白色重型勾选标记（截至2017年，支持性参差不齐）
(⚠ 十六进制：🗴 / 十进制：🗴）：投票脚本X（截至2017年，支持性较差）
(⚠ 十六进制：🗶 / 十进制：🗶）：投票粗体脚本X（截至2017年，支持性较差）
⮽ (⚠ 十六进制：⮽ / 十进制：⮽）：带有轻型X的投票箱（截至2017年，支持性较差）
(⚠ 十六进制：🗵 / 十进制：🗵）：带有脚本X的投票箱（截至2017年，支持性较差）
(⚠ 十六进制：🗹 / 十进制：🗹）：带有粗体勾选标记的投票箱（截至2017年，支持性较差）
(⚠ 十六进制：🗷 / 十进制：🗷）：带有粗体脚本X的投票箱（截至2017年，支持性较差）

查找适用于打勾符号的网络字体？这里有一个可直接使用的示例，其中包含较常见的符号：A☐B☑C☒D✓E✔F✗G✘H -- 只需将其复制/粘贴到您的网络字体提供商的样本文本框中，查看哪些字体支持哪些打勾符号。

- Bogdan Stăncescu

17

客户端需要一种适当的字体，以便显示该字符的字形。但是 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上测试通过。

- Gumbo

没有任何字体，只有类似于Unicode字体的Lucida Sans Unicode，但它没有勾号。 - Vlad Gudim

然后列出一些具有此字符字形的字体：font-family: Arial Unicode MS，Lucida Sans Unicode，Lucida Grande。 - Gumbo

Gumbo不起作用，另外我也没有安装Arial Unicode MS和Lucida Grande字体。 - Vlad Gudim

这大概是你能得到的最接近的了，但不幸的是Lucida Sans Unicode字体不支持U+2713/2714。 - bobince

14

我通常使用fontawesome字体(http://fontawesome.io/icon/check/)，你可以在HTML文件中使用它。

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

或者在CSS中：

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

- stefan

13

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

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

我认为这将在所有浏览器上都能起作用。

- Drejc

7

我们不需要一个控制器，只需要在矩阵中指示某个选项是可用的。在这种情况下使用禁用的控制器是错误的。 - Vlad Gudim

10

在晚来的时候，我发现&check; （✓）在Opera浏览器上可以使用。我没有在其他浏览器上测试过它，但对于某些人可能会有用。

- rossum

5

值得注意的是，&check;（以及&checkmark;）都会被解析为✓，这也是顶部答案中使用的内容。它是一个HTML5的字符实体，在IE6中无法使用。 - James Donnelly

9

我遇到了同样的问题，但没有任何建议起作用（在Windows XP上使用Firefox）。

所以我找到了一个可能的解决方法，使用图像数据来显示一个小勾号：

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

当然，您可以创建自己的勾选图像并使用转换器将其添加为data:image/gif。希望这可以帮助到您。

- Avatar

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无法使用它，那对您没有帮助）。

此外，这是一个相当恶劣的hack——该字符在所有情况下都类似于“ü”，并且在搜索引擎等方面或者在文本被复制粘贴时将以这种方式出现。除非您确实没有其他选择，否则最好使用正确的Unicode代码点。

问题在于，没有任何与Windows捆绑的字体提供U+2713 CHECK MARK（'✓'）。您在Windows机器上找到的唯一一个字体可能是“Arial Unicode MS”，但不能完全依赖它。因此，最终我认为您必须要么：

使用更好支持的不同字符（例如，“●” — bullet，SO中使用），或
使用带有“✓”作为alt文本的图像。

- bobince

6

是否使用√（平方根符号，√）足够？

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

- Ian Kemp

谢谢！平方根可以工作，但看起来有点像嗯...平方根？但我想在没有替代方案的情况下，这可能是最接近的了。 - Vlad Gudim

1

顺便说一下，在我的IE浏览器上指定元标记可以很好地设置UTF-8，所以在这种情况下这不是问题。 - Vlad Gudim

1

一个平方根就是一个平方根，一个勾号就是一个勾号。对我来说，这就像把厕所象形图放在更衣室门上一样。 - Volker E.

1

@VolkerE。但那将是很有趣的！ - Dave Newton

5

使用Windows默认字体 Wingdings 的解决方案；它不是基于 Unicode 的，在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> ✓

- Nishant

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Feminella · Accepted Answer

我认为您正在使用支持不太好的Unicode值，这些值并不总是具有所有代码点的字形。
请尝试以下字符：

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

编辑：这里的第一个符号，☐ / 0x2610可能会引起一些混淆。这是一个空的（未选中的）复选框，所以如果你看到一个方框，那就是它应该的样子。它是☑ / 0x2611的对应物，后者是选中版本。