HTML/XHTML 中的刻度符号

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

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

编辑：这里的第一个符号似乎有些混淆，☐/0x2610。这是一个空的（未选中的）复选框，因此，如果您看到一个框，这就是它应该看起来的样子。它是 / 0x2611 的☑对应物，后者是检查版本。

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

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

这在 IE 5.5、IE 6.0、FF 3.0.6 的 Windows XP 上对我有用。

您可以使用⊕或⊗

√（平方根符号，√）就足够了吗？

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

尽管将浏览器编码设置为 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 复选标记 （'✓'）。您在 Windows 机器上唯一可能找到的是“Arial Unicode MS”，它并不是真正值得依赖的。所以最后我认为你必须：

• 使用支持更好的不同字符（例如。'●' — 项目符号，由 SO 使用），或
• 使用图像，以“✓”作为替代文本。

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

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

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

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

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

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

• ☐ （十六进制： / dec： ）： 投票箱（空的，应该是这样的）☐☐
• ☑ （十六进制： / dec： ）： 带支票的投票箱☑☑
• ☒ （十六进制： / dec： ）： 带 x 的投票箱☒☒
• ✓ （十六进制： / dec： ）：复选标记，相当于大多数浏览器✓✓✓✓
• ✔ （十六进制：/ dec：）：重复选标记✔✔
• ✗ （十六进制： / dec： ）： 选票 x✗✗
• ✘ （十六进制： / dec： ）： 重选票 x✘✘
• 🗸 ⚠ （ 十六进制： / dec ）： 浅色复选标记（截至 2017 年支持不佳）🗸🗸
• ✅ ⚠ （ 十六进制： / dec： ）：白色重复选标记（截至 2017 年的混合支持）✅✅
• 🗴 ⚠ （ hex： / dec： ）： 选票脚本 X（截至 2017 年支持不佳）🗴🗴
• 🗶 ⚠ （ 十六进制： / dec： ）： 选票粗体脚本 X（截至 2017 年支持不佳）🗶🗶
• ⮽ （ 十六进制： / dec： ）： 带有浅色 X 的投票箱（⚠截至 2017 年支持不佳）⮽⮽
• 🗵 ⚠ （ hex： / dec： ）： 带有脚本 X 的投票箱（截至 2017 年支持不佳）🗵🗵
• 🗹 ⚠ （ 十六进制： / dec： ）： 带有粗体勾选的投票箱（截至 2017 年支持不佳）🗹🗹
• 🗷 ⚠ （ hex： / dec： ）： 带有粗体字 X 的投票箱（截至 2017 年支持不佳）🗷🗷

查看 Web 字体中的刻度符号？下面是一个更常见的即用型示例： -- 只需将其复制/粘贴到网络字体提供商的示例文本框中，然后查看哪些字体支持哪些刻度符号。A☐B☑C☒D✓E✔F✗G✘H

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

使用 CSS content 属性，您可以使用图像或其他 codesign 显示勾号。

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

因此，我找到了一种可能的解决方法，使用图像数据显示一个小复选标记：

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

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

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

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

或者在 CSS 中：

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

使用Windows默认字体的解决方案;它不是基于并且不能在 Linux 中工作（除非已安装）：Wingdingsunicode

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

你可以用 Base64 编码的 GIF 添加一个白色的小 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">

使用 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 (Mary, feel free to change grey border to white. I keep grey here so we can see it)
<div style="display: inline; font-family: Wingdings; font-size: 15px; background-color: lightblue; border: 2px solid grey; padding: 1px 4px 0 2px;">&#252;</div>

参考这里： wingdings webdings