HTML/XHTML 中的刻度符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/658044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tick symbol in HTML/XHTML
提问by Vlad Gudim
We need to display a tick symbol(✓ or ✔) within an internal web app and would ideally like to avoid using an image.
我们需要在内部网络应用程序中显示一个勾号（✓ 或 ✔），并且最好避免使用图像。
Has to work starting with IE 6.0.2900 on a XP box, ideally we need it be cross-browser (IE + recent versions of FF).
必须在 XP 机器上从 IE 6.0.2900 开始工作，理想情况下我们需要它是跨浏览器（IE + FF 的最新版本）。
The following displays boxes although sets browser encoding to UTF-8 (META works nicely and not the issue). The default font is Times New Roman (might be an issue, but trying Lucida Sans Unicode doesn't help and I don't have neither Arial Unicode MS, nor Lucida Grande installed).
尽管将浏览器编码设置为 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>
Any help appreciated.
任何帮助表示赞赏。
The following works under IE 6.0 and IE 7:
以下适用于 IE 6.0 和 IE 7：
<html>
<head>
</head>
<body>
<span style="font-family: wingdings; font-size: 200%;">ü</span>
</body>
</html>
I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.
如果有人可以在 Windows 上的 FF 下检查，我将不胜感激。我很确定它不会在非 Windows 机器上工作。
回答by John Feminella
I think you're using less-well-supported Unicode values, which don't always have glyphs for all the code points.
Try the following characters:
我认为您正在使用支持较少的 Unicode 值，这些值并不总是具有所有代码点的字形。
尝试以下字符：
- ? (0x2610in Unicode hexadecimal [HTML decimal:
☐]): an empty (unchecked) checkbox - ? (0x2611[HTML decimal:
☑]): the checked version of the previous checkbox - ? (0x2713[HTML decimal:
✓]) - ? (0x2714[HTML decimal:
✔])
- ? （Unicode 十六进制中的0x2610[HTML 十进制：
☐]）：一个空的（未选中）复选框 - ? ( 0x2611[HTML 十进制:
☑]): 上一个复选框的选中版本 - ? ( 0x2713[HTML 十进制:
✓]) - ? ( 0x2714[HTML 十进制:
✔])
Edit:There seems to be some confusion about the first symbol here, ? / 0x2610. This is an empty (unchecked) checkbox, so if you see a box, that's the way it's supposed to look. It's the counterpart to ? / 0x2611, which is the checked version.
编辑：这里的第一个符号似乎有些混乱，？/ 0x2610。这是一个空的（未选中的）复选框，所以如果您看到一个框，那就是它应该看起来的样子。是对方的吗？/0x2611，这是被检查的版本。
回答by Bogdan St?ncescu
First off, you should realize that you don't actually need to use HTML entities – as long as your HTML document's encoding is declared properly as UTF-8, you can simply copy/paste these symbols into your file/server-side script/JavaScript/whatever.
首先，您应该意识到您实际上并不需要使用 HTML 实体——只要您的 HTML 文档的编码正确声明为 UTF-8，您就可以简单地将这些符号复制/粘贴到您的文件/服务器端脚本中/ JavaScript/随便什么。
Having said that, here's the exhaustive list of all relevant UTF-8 characters / HTML entitiesrelated to this topic:
话虽如此，以下是与此主题相关的所有相关 UTF-8 字符/HTML 实体的详尽列表：
- ? (hex:
☐/ dec:☐): ballot box (empty, that's how it's supposed to be) - ? (hex:
☑/ dec:☑): ballot box with check - ? (hex:
☒/ dec:☒): ballot box with x - ? (hex:
✓/ dec:✓): check mark, equivalent to✓and✓in most browsers - ? (hex:
✔/ dec:✔): heavy check mark - ? (hex:
✗/ dec:✗): ballot x - ? (hex:
✘/ dec:✘): heavy ballot x - (? hex:
🗸/ dec🗸): light check mark (poorly supported as of 2017) - ? (? hex:
✅/ dec:✅): white heavy check mark (mixed support as of 2017) - (? hex:
🗴/ dec:🗴): ballot script X (poorly supported as of 2017) - (??hex:
🗶/ dec:🗶): ballot bold script X (poorly supported as of 2017) - ? (? hex:
⮽/ dec:⮽): ballot box with light X (poorly supported as of 2017) - (? hex:
🗵/ dec:🗵): ballot box with script X (poorly supported as of 2017) - (? hex:
🗹/ dec:🗹): ballot box with bold check (poorly supported as of 2017) - (? hex:
🗷/ dec:🗷): ballot box with bold script X (poorly supported as of 2017)
- ? (hex:
☐/ dec:☐): 投票箱（空的，应该是这样） - ? (hex:
☑/ dec:☑): 带支票的投票箱 - ? （十六进制：
☒/十进制：）：☒带有 x 的投票箱 - ? （己烷：
✓/ DEC：✓）：复选标记，相当于✓与✓在大多数浏览器 - ? （十六进制：
✔/十进制：）：重复选✔标记 - ? （十六进制：
✗/十进制：）✗：选票 x - ? (hex:
✘/ dec:✘): 重选 x - (? hex:
🗸/ dec🗸)：浅色复选标记（截至 2017 年支持不佳） - ? (? hex:
✅/ dec:✅): 白色重复选标记（截至 2017 年混合支持） - (? hex:
🗴/ dec:🗴): 投票脚本 X（截至 2017 年支持不佳） - (??hex:
🗶/ dec:🗶)：投票粗体脚本 X（截至 2017 年支持不佳） - ? (? hex:
⮽/ dec:⮽): 带有浅色 X 的投票箱（截至 2017 年支持不佳） - (? hex:
🗵/ dec:🗵): 带有脚本 X 的投票箱（截至 2017 年支持不佳） - (? hex:
🗹/ dec:🗹): 带有粗体检查的投票箱（截至 2017 年支持不佳） - (? hex:
🗷/ dec:🗷): 带有粗体脚本 X 的投票箱（截至 2017 年支持不佳）
Checking out web fonts for tick symbols? Here's a ready to use sample for the more common ones: A?B?C?D?E?F?G?H-- just copy/paste this into your webfont provider's sample text box and see which fonts support what tick symbols.
检查刻度符号的网络字体？以下是更常见的示例：A?B?C?D?E?F?G?H- 只需将其复制/粘贴到您的 webfont 提供商的示例文本框中，然后查看哪些字体支持哪些刻度符号。
回答by Gumbo
The client machine needs a proper font that has a glyph for this character to display it. But Times New Roman doesn't. Try Arial Unicode MSor Lucida Grandeinstead:
客户端机器需要一个适当的字体，该字体具有该字符的字形来显示它。但 Times New Roman 没有。试试Arial Unicode MS或Lucida Grande：
<span style="font-family: Arial Unicode MS, Lucida Grande">
✓ ✔
</span>
This works for me on Windows XP in IE 5.5, IE 6.0, FF 3.0.6.
这对我在 IE 5.5、IE 6.0、FF 3.0.6 中的 Windows XP 上有效。
回答by stefan
I normally use the fontawesome font(http://fontawesome.io/icon/check/), you can use it in html files:
我通常使用 fontawesome 字体（http://fontawesome.io/icon/check/），你可以在 html 文件中使用它：
<i class="fa fa-check"></i>
or in css:
或在 css 中：
content: "\f00c";
font-family: FontAwesome;
回答by Kai Noack
I run into the same problem and none of the suggestions worked (Firefox on Windows XP).
我遇到了同样的问题，但没有任何建议起作用（Windows XP 上的 Firefox）。
So I found a possible workaroundusing image data to display a little checkmark:
所以我找到了一个可能的解决方法，使用图像数据来显示一个小复选标记：
span:before {
content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}
Of course you can create your own checkmark image and use a converter to add it as data:image/gif. Hope this helps.
当然，您可以创建自己的复选标记图像并使用转换器将其添加为 data:image/gif。希望这可以帮助。
回答by Drejc
Why don't you use the HTML input checkbox element in read only mode
为什么不在只读模式下使用 HTML 输入复选框元素
<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />
I assume this will work on all browsers.
我认为这适用于所有浏览器。
回答by rossum
Coming very late to the party, I found that ✓(✓) worked in Opera. I haven't tested it on any other browsers, but it might be useful for some people.
参加聚会很晚，我发现✓(✓) 在 Opera 工作。我没有在任何其他浏览器上测试过它，但它可能对某些人有用。
回答by bobince
although sets browser encoding to UTF-8
虽然将浏览器编码设置为 UTF-8
(If you're using numeric character references of course it doesn't matter what encoding is being used, browsers will get the correct Unicode codepoint directly from the number.)
（当然，如果您使用数字字符引用，则使用何种编码无关紧要，浏览器将直接从数字中获取正确的 Unicode 代码点。）
<span style="font-family: wingdings; font-size: 200%;">ü</span>
I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.
如果有人可以在 Windows 上的 FF 下检查，我将不胜感激。我很确定它不会在非 Windows 机器上工作。
Fails for me in Firefox 3, Opera, and Safari. Curiously, works in the other Webkit browser, Chrome. Also fails on Linux (obviously, as Wingdings isn't installed there; it is installed on Macs, but that doesn't help you if Safari's not having it).
我在 Firefox 3、Opera 和 Safari 中失败。奇怪的是，它适用于其他 Webkit 浏览器 Chrome。在 Linux 上也失败（显然，因为 Wingdings 没有安装在那里；它安装在 Mac 上，但如果 Safari 没有它，那对你没有帮助）。
Also it's a pretty nasty hack?—?that character is to all intents and purposes “ü” and will appear that way to things like search engines, or if the text is copy-and-pasted. Proper Unicode code points are the way to go unless you really have no alternative.
这也是一个非常讨厌的黑客？-？那个字符是所有意图和目的“ü”，并且会以这种方式出现在搜索引擎之类的东西上，或者如果文本是复制粘贴的。除非您真的别无选择，否则正确的 Unicode 代码点是可行的方法。
The problem is that no font bundled with Windows supplies U+2713 CHECK MARK (‘?'). The only one that you're at all likely to find on a Windows machine is “Arial Unicode MS”, which is not really to be relied upon. So in the end I think you'll have to either:
问题是没有与 Windows 捆绑的字体提供 U+2713 CHECK MARK ('?')。您在 Windows 机器上可能会找到的唯一一个是“Arial Unicode MS”，它实际上并不可靠。所以最后我认为你必须：
- use a different character which is better supported (eg. ‘●' — bullet, as used by SO), or
- use an image, with ‘?' as the alt text.
- 使用更受支持的不同字符（例如 '●' — bullet，如 SO 所用），或
- 使用带有“?”的图像 作为替代文字。
回答by s-sharma
.className {
content: '\✓';
}
Using CSS content Property you can show tick with an image or other codesign.
使用 CSS 内容属性，您可以显示带有图像或其他代码的刻度。
回答by Ian Kemp
Would √ (square root symbol, √) suffice?
√（平方根符号，√）就足够了吗？
Alternatively, ensure you're setting the Content-Type:header beforesending data to the browser. Merely specifying the <meta>content-type tag may not be enough to encourage browsers to use the correct character set.
或者，确保在将数据发送到浏览器之前设置Content-Type:标题。仅仅指定content-type 标签可能不足以鼓励浏览器使用正确的字符集。<meta>
