HTML/XHTML 中的勾号
[英]Tick symbol in HTML/XHTML
问题描述
我们需要在内部 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>
✓ ✔
</body>
</html>
任何帮助表示赞赏。
以下在 IE 6.0 和 IE 7 下工作：
<html>
<head>
</head>
<body>
<span style="font-family: wingdings; font-size: 200%;">ü</span>
</body>
</html>
如果有人可以在 Windows 上查看 FF，我将不胜感激。 我很确定它不适用于非 Windows 盒子。
14 个解决方案
解决方案1
461 2009-03-18 12:30:14
我认为您使用的是不太受支持的 Unicode 值，这些值并不总是具有所有代码点的字形。
尝试以下字符：
- ☐（ Unicode十六进制中的 0x2610 [HTML 十进制：
☐]）：一个空的（未选中）复选框 - ☑ ( 0x2611 [HTML decimal:
☑]): 前一个复选框的选中版本 - ✓ ( 0x2713 [HTML 十进制:
✓]) - ✔ ( 0x2714 [HTML 十进制:
✔])
编辑：这里的第一个符号 ☐ / 0x2610 似乎有些混淆。 这是一个空的（未选中的）复选框，所以如果您看到一个框，这就是它应该的样子。 它是 ☑ / 0x2611 的对应项，即检查版本。
解决方案2
278 2013-08-18 00:49:51
首先，您应该意识到您实际上并不需要使用 HTML 实体 - 只要您的 HTML 文档的编码正确声明为 UTF-8，您可以简单地将这些符号复制到您的文件/JavaScript/服务器端任何。
话虽如此，以下是与此主题相关的所有相关 UTF-8 字符/HTML 实体的详尽列表：
- ☐ (hex:
☐/ dec:☐): 投票箱（空的，应该是这样的） - ☑ (hex:
☑/ dec:☑): 带支票的投票箱 - ☒ (hex:
☒/ dec:☒): 带 x 的投票箱 - ✓ (hex:
✓/ dec:✓)：复选标记，相当于✓✓在大多数浏览器中 - ✔ (hex:
✔/ dec:✔): 重复选标记 - ✗ (十六进制:
✗/ 十进制:✗): 选票 x - ✘ (hex:
✘/ dec:✘): 重选票 x - （⚠ hex:
🗸/ dec🗸）：浅色复选标记（截至 2017 年支持不佳） - ✅ (⚠ hex:
✅/ dec:✅)：白色重复选标记（截至 2017 年混合支持） - （⚠ 十六进制：
🗴/ 十进制：🗴）：选票脚本 X（截至 2017 年支持不佳） - (⚠ hex:
🗶/ dec:🗶)：选票粗体脚本 X（截至 2017 年支持不佳） - ⮽ (⚠ hex:
⮽/ dec:⮽)：带灯 X 的投票箱（截至 2017 年支持不佳） - (⚠ hex:
🗵/ dec:🗵)：带有脚本 X 的投票箱（截至 2017 年支持不佳） - (⚠ hex:
🗹/ dec:🗹)：带粗体检查的投票箱（截至 2017 年支持不佳） - (⚠ hex:
🗷/ dec:🗷)：带有粗体脚本 X 的投票箱（截至 2017 年支持不佳）
检查 web fonts 的刻度符号？ 以下是更常见的现成示例： A☐B☑C☒D✓E✔F✗G✘H - 只需将其复制/粘贴到您的网络字体提供商的示例文本框中，然后查看哪些 fonts 支持哪些刻度符号。
解决方案3
17 2009-03-18 12:30:26
客户端计算机需要一个适当的字体，该字体具有该字符的字形才能显示它。 但时代新罗马没有。 试试Arial Unicode MS或Lucida Grande ：
<span style="font-family: Arial Unicode MS, Lucida Grande">
✓ ✔
</span>
这适用于 IE 5.5、IE 6.0、FF 3.0.6 中的 Windows XP。
解决方案4
14 2014-06-12 10:00:50
我通常使用 fontawesome 字体（ http://fontawesome.io/icon/check/ ），您可以在 html 文件中使用它：
<i class="fa fa-check"></i>
或在 css 中：
content: "\f00c";
font-family: FontAwesome;
解决方案5
12 2009-03-18 14:33:45
为什么不在只读模式下使用 HTML 输入复选框元素
<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />
我认为这将适用于所有浏览器。
解决方案6
11 2013-09-28 19:36:16
我遇到了同样的问题，但没有任何建议有效（Windows XP 上的 Firefox）。
所以我找到了一个可能的解决方法，使用图像数据显示一个小复选标记：
span:before {
content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}
当然，您可以创建自己的复选标记图像并使用转换器将其添加为 data:image/gif。 希望这可以帮助。
解决方案7
9 2013-05-23 14:53:56
参加聚会很晚，我发现✓ (✓) 在 Opera 工作。 我没有在任何其他浏览器上测试过它，但它可能对某些人有用。
解决方案8
8 2009-03-18 14:16:46
尽管将浏览器编码设置为 UTF-8
（当然，如果您使用数字字符引用，则使用什么编码并不重要，浏览器将直接从数字中获得正确的 Unicode 代码点。）
<span style="font-family: wingdings; font-size: 200%;">ü</span>
如果有人可以在 Windows 上查看 FF，我将不胜感激。 我很确定它不适用于非 Windows 盒子。
我在 Firefox 3、Opera 和 Safari 中失败了。 奇怪的是，它可以在另一个 Webkit 浏览器 Chrome 中运行。 Linux 也失败（显然，Wingdings 没有安装在那里；它安装在 Mac 上，但如果 Safari 没有它，这对你没有帮助）。
这也是一个非常讨厌的 hack——这个字符在所有意图和目的上都是“ü”，并且会以这种方式出现在搜索引擎之类的东西上，或者如果文本是复制粘贴的。 除非您真的别无选择，否则正确的 Unicode 代码点是通往 go 的方法。
问题是没有与 Windows 捆绑的字体提供 U+2713 CHECK MARK ('✓')。 您可能在 Windows 机器上找到的唯一一个是“Arial Unicode MS”，这并不是真正值得信赖的。 所以最后我认为你必须：
- 使用更好支持的不同字符（例如，'●' —项目符号，如 SO 使用的那样），或
- 使用图像，将“✓”作为替代文本。
解决方案9
5 2013-09-25 09:29:29
.className {
content: '\✓';
}
使用 CSS content 属性，您可以显示带有图像或其他代码设计的刻度。
解决方案10
5 2015-01-28 10:46:43
使用 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> ✓
解决方案11
5 2009-03-18 13:31:32
√（平方根符号，√）就足够了吗？
或者，确保在将数据发送到浏览器之前设置Content-Type: header。 仅仅指定<meta>内容类型标签可能不足以鼓励浏览器使用正确的字符集。
解决方案12
1 2020-05-14 23:28:00
使用WebDing或WingDing fonts 是实现本主题目标的唯一方法：它必须从 IE 6.0.2900 开始工作。 因此，我将在此处发布一些内容，并对上面发布的内容进行一些更正：
Cross <span style="font-family: Wingdings;">û</span><br> Check <span style="font-family: Wingdings;">ü</span><br> Crossed Checkbox <span style="font-family: Wingdings;">ý</span><br> Checked Checkbox <span style="font-family: Wingdings;">þ</span><br> Empty Checkbox <span style="font-family: Wingdings;">¨</span><br> Thick Check <span style="font-family: Webdings;">a</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;">ü</div>
解决方案13
0 2019-06-02 01:48:07
您可以使用 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">
解决方案14
0 2009-03-18 12:31:24
你可以使用⊕或⊗
我可以使用'value'属性在HTML按钮上添加'tick'符号吗？
[英]Can I put a 'tick' symbol on an HTML button using the 'value' attribute?
从HTML转换为XHTML会更改欧元符号，从而阻止正确的XML解析
[英]Conversion from HTML to XHTML changes euro symbol, preventing correct XML parsing
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.