在HTML/XHTML中勾选符号

Question

在HTML/XHTML中勾选符号

我们需要在内部网络应用程序中显示刻度符号(✓或✔),理想情况下要避免使用图像.

必须在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>

Run Code Online (Sandbox Code Playgroud)

任何帮助赞赏.

以下在IE 6.0和IE 7下工作:

<html>
<head>

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

Run Code Online (Sandbox Code Playgroud)

如果有人可以在Windows下查看FF,我将不胜感激.我很确定它不适用于非Windows机器.

Answer 1

Joh*_*lla 451

我认为你使用的是不太受支持的Unicode值,它们并不总是包含所有代码点的字形.
请尝试以下字符:

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

编辑:这里的第一个符号似乎有些混乱,☐/ 0x2610.这是一个空的(未选中)复选框,因此如果您看到一个框,那就是它应该看起来的方式.它是☑/ 0x2611的对应物,这是经过检查的版本.

为了清楚起见,第一张图片应该是一个盒子 - 它是一个空的复选框! (6认同)
空盒十进制代码:0x2610 - > 9744.所以HTML代码看起来像`☐`类似于复选框:0x2611 - > 9745&HTML code`☑` (5认同)

Answer 2

Bog*_*scu 260

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

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

☐(十六进制:☐/ dec :):☐投票箱(空,这应该是怎样的)
☑(十六进制:☑/ dec :):☑带支票的投票箱
☒(十六进制:☒/ dec :):☒带x的投票箱
✓(十六进制:✓/ dec :):✓复选标记,相当于&checkmark;和&check;在大多数浏览器中
✔(十六进制:✔/ dec :) ✔:重复复选标记
✗(十六进制:✗/ dec :) ✗:选票x
✘(十六进制:✘/ dec :) ✘:重型选票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提供程序的示例文本框中,并查看哪些字体支持哪些刻度符号.

Answer 3

Gum*_*mbo 17

客户端计算机需要一个正确的字体,该字体具有该字符的字形以显示它.但Times New Roman却没有.请尝试使用Arial Unicode MS或Lucida Grande:

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

Run Code Online (Sandbox Code Playgroud)

这适用于Windows XP中的IE 5.5,IE 6.0,FF 3.0.6.

Answer 4

ste*_*fan 13

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

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

Run Code Online (Sandbox Code Playgroud)

或者在css中:

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

Run Code Online (Sandbox Code Playgroud)

Answer 5

Dre*_*ejc 11

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

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

Run Code Online (Sandbox Code Playgroud)

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

我们不需要控件,只需指示矩阵中有某个选项可用.在这种情况下,使用禁用的控件会出错. (6认同)

Answer 6

Kai*_*ack 11

我遇到了同样的问题,并没有任何建议(Windows XP上的Firefox).

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

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

Run Code Online (Sandbox Code Playgroud)

当然,您可以创建自己的复选标记图像并使用转换器将其添加为数据:image/gif.希望这可以帮助.

Answer 7

bob*_*nce 8

虽然将浏览器编码设置为UTF-8

(如果您正在使用数字字符引用,那么使用什么编码无关紧要,浏览器将直接从数字中获取正确的Unicode代码点.)

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

Run Code Online (Sandbox Code Playgroud)

如果有人可以在Windows下查看FF,我将不胜感激.我很确定它不适用于非Windows机器.

在Firefox 3,Opera和Safari中失败了.奇怪的是,在其他Webkit浏览器Chrome中工作.在Linux上也失败了(很明显,因为Wingdings没有安装在那里;它安装在Mac上,但如果Safari没有安装,那对你没有帮助).

这也是一个非常令人讨厌的黑客 - 这个角色对所有意图和目的都是"ü"并且会出现在搜索引擎之类的东西上,或者文本是复制粘贴的.正确的Unicode代码点是要走的路,除非你真的别无选择.

问题是没有与Windows捆绑的字体提供U + 2713 CHECK MARK('✓').你可能在Windows机器上找到的唯一一个是"Arial Unicode MS",这是不值得依赖的.所以最后我认为你必须要么:

使用更好支持的不同角色(例如'●' - 子弹,如SO所使用的),或
使用图像,使用'✓'作为替代文字.

Answer 8

ros*_*sum 8

来到派对很晚,我发现&check;(✓)在Opera工作.我没有在任何其他浏览器上测试它,但它可能对某些人有用.

值得注意的是`&check;`(和`&checkmark;`)都评估为`✓`,这是最佳答案所用的.它是HTML5 [字符实体](http://dev.w3.org/html5/html-author/charref),在IE6中不起作用. (4认同)

Answer 9

Ian*_*emp 5

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

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

Answer 10

s-s*_*rma 5

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

Run Code Online (Sandbox Code Playgroud)

使用CSS内容属性,您可以显示带图像或其他编码的刻度.

如果你想在css内容中使用utf-8代码,这种方式是可能的:`.class {content:"\ 2713"; }` (4认同)

Answer 11

Nis*_*ant 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> ?

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，5 月前
查看次数：	505984 次
最近记录：	6 年，3 月前