HTML / XHTML中的刻度符号

279

我们需要在内部网络应用程序中显示一个勾号（✓或✔），并且理想情况下希望避免使用图像。

必须在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盒子上工作。

html xhtml

— 弗拉德·古迪姆
source

1

勾号符号应该看起来像什么？

— John Feminella 09年

您是否看到过：html-faq.com/htmlbasics/?specialcharacters

— Sam Hasler，2009年

2

山姆，请看看这个问题。

— 弗拉德·古迪姆09年

@Totophil，我知道它谈论的是相同的实体，但它也建议让服务器发送实际的HTTP标头Content-Type：text / html; charset = utf-8以及所用字体可能不包含的问题所使用字符的字形。

— 山姆·哈斯勒

这里有几个：amp-what.com/#q=check%20mark ＆＃x2713＆＃x2714

— NDP

454

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

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

编辑：这里的第一个符号似乎有些混乱，☐/ 0x2610。这是一个空（未选中）复选框，因此，如果您看到一个框，则应该是它的外观。它与☑/ 0x2611（已检查的版本）相对应。

— 约翰·费米内拉
source

1

企业设置：Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

— Vlad Gudim 09年

第一个是我的盒子，其余的都很好。虽然，我会使用图像代替，只是为了确保。

— mbillard

6

为了清楚起见，第一个图像应该是一个框-这是一个空的复选框！

— John Feminella 09年

1

@Totophil：嗯，好吧。我正在使用Ubuntu，并且在FF中配置的默认sans字体具有这些字形。在Windows中，只需使用字符映射表查找这些字形，然后查看所需的字体是否包含它们。如果没有，您将需要选择另一个。

— 约翰·费米内拉

5

空框的十进制代码：0x2610->9744。因此，HTML代码看起来类似于☐复选框：0x2611-> 9745和HTML代码☑

— Vikas

272

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

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

☐（十六进制：☐/ dec ：）：☐投票箱（为空，应该是这样）
☑（十六进制：☑/ dec ：)：☑带支票的投票箱
☒（十六进制：☒/ dec ：）：☒带x的投票箱
✓（十六进制：✓/ DEC： ✓）：复选标记，等同于&checkmark;和&check;在大多数浏览器
✔（十六进制：✔/ dec：）：✔复选标记
（十六进制：✗/ dec ：) ✗：选票x
（十六进制：✘/十进制：) ✘：重选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提供者的示例文本框中，然后查看哪些字体支持哪些刻度符号。

— BogdanStăncescu
source

17

客户端计算机需要一种带有字形的正确字体，此字符才能显示它。但是时代新罗马没有。尝试使用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。

— 秋葵
source

没有任何一种字体，只有Lucida Sans Unicode，它看起来像unicode字体，但是没有刻度。

— 弗拉德·古迪姆09年

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

— Gumbo

浓汤，不起作用。此外，我没有安装Arial Unicode MS和Lucida Grande。

— 弗拉德·古迪姆09年

它与您将要获得的接近，但是很遗憾，Lucida Sans Unicode不提供U + 2713/2714。

— bobince

13

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

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

或在CSS中：

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

— 斯蒂芬
source

11

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

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

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

— 德雷奇
source

6

我们不需要控件，只是指示矩阵中有某个选项可用。在这种情况下，使用禁用的控件将是错误的。

— Vlad Gudim 09年

11

我遇到了同样的问题，但所有建议均无效（Windows XP上为Firefox）。

因此，我发现了使用图像数据显示一些对勾标记的可能解决方法：

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

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

— 凯诺克
source

8

尽管将浏览器编码设置为UTF-8

（当然，如果使用数字字符引用，使用哪种编码都没有关系，浏览器将直接从数字中获取正确的Unicode代码点。）

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

如果有人可以在Windows上的FF下查看，我将不胜感激。我很确定它不能在非Windows盒子上工作。

在Firefox 3，Opera和Safari中对我而言失败。奇怪的是，它可以在其他Webkit浏览器Chrome中使用。在Linux上也会失败（很明显，因为Wingdings没有安装在Linux上；它已经安装在Mac上，但是如果Safari没有的话这对您没有帮助）。

这也是一个很讨厌的技巧-这个字符在所有意图和目的上都是“ü”，并且会以这种方式出现在诸如搜索引擎之类的东西中，或者如果文本是复制粘贴的。除非您别无选择，否则正确的Unicode代码点是必经之路。

问题是Windows捆绑的字体没有提供U + 2713 CHECK MARK（'✓'）。在Windows机器上，您唯一可能会找到的唯一不是Arial Unicode MS。因此，最后我认为您必须：

使用更好支持的其他字符（例如“●” — 项目符号，SO使用的），或者
使用图片，并以'✓'作为替代文字。

— 博宾斯
source

8

参加聚会很晚，我发现&check;（✓）在Opera中工作。我尚未在任何其他浏览器上对其进行过测试，但是它对某些人可能有用。

— 玫瑰
source

4

值得一提的是&check;（和&checkmark;）的总和为✓，这是最常见的答案。这是一个HTML5 字符实体，在IE6中不起作用。

— James Donnelly

5

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

使用CSS content属性，您可以显示带有图像或其他代码符号的刻度。

— 沙玛
source

不确定：w3schools.com/cssref/pr_gen_content.asp与Firefox共同显示

— s-sharma

todomvc.com/labs/architecture-examples/react检查其是否正常工作，因为它们使用的内容是刻度线。

— s-sharma 2013年

4

如果您想在CSS内容中使用utf-8代码，则可以这样进行：.class{ content: "\2713"; }

— Morteza Ziyae 2014年

4

√（平方根符号，＆＃8730;）就足够了吗？

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

— 伊恩·坎普
source

谢谢！平方根有效，但是看起来有点像errr ...平方根？但是我想如果没有其他选择，它可能会尽可能接近。

— 弗拉德·古迪姆09年

1

顺便说一句，指定meta标签可以在我的IE上很好地设置UTF-8，因此在这种情况下，这不是问题。

— 弗拉德·古迪姆09年

1

平方根是平方根，复选标记是复选标记。感觉就像把厕所象形图放在更衣室的门上一样。

— Volker E.

1

@VolkerE。但是，那太好笑了！

— 戴夫·牛顿

3

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

— 西信
source

0

您可以使用⊕或⊗

— 加布里埃尔·所罗门
source

1

这些不是刻度线，而是加/减号。

— GKFX

0

您可以添加一个带有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">

— 沃洛米克
source

0

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

展开摘要

参考这里：宋体 webdings

— 德米特里·巴比奇（Dmitry Babich）
source