勾选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的框中工作。

我认为你使用的是支持得不好的Unicode值,对所有的代码点并不总是有字形。
尝试以下字符:

  • ☐(Unicodehex中的0x2610 [HTML十进制: &#9744; ]):空(未选中)checkbox
  • ☑( 0x2611 [HTML十进制: &#9745; ]):前一个checkbox的选中版本
  • ✓( 0x2713 [HTML十进制: &#10003; ])
  • ✔( 0x2714 [HTML十进制: &#10004; ])

编辑:这里似乎有一些关于第一个符号的混淆,☐/ 0x2610。 这是一个空的(未选中的)checkbox,所以如果你看到一个盒子,那就是它应该看起来的样子。 这是与☑/ 0x2611,这是检查版本的对应。

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

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

  • ☐(hex: &#x2610; / dec: &#9744; ):投票箱(空的,这就是应该的)
  • ☑(hex: &#x2611; / dec: &#9745; ):带检查的投票箱
  • &#x2612; (hex: &#x2612; / dec: &#9746; ):带x的投票箱
  • ✓(hex: &#x2713; / dec: &#10003; ):选中标记,相当于&checkmark;&check; 在大多数浏览器中
  • ✔(hex: &#x2714; / dec: &#10004; ):复选标记
  • ✗(hex: &#x2717; / dec: &#10007; ):选票x
  • ✘(hex: &#x2718; / dec: &#10008; ):重选票x
  • 🗸(⚠hex: &#x1F5F8; / dec &#128504; ):轻选复选标记(截至2017年支持不力)
  • ✅(⚠hex: &#x2705; / dec: &#9989; ):白色&#x2705;选中标记(混合支持截至2017年)
  • 🗴(⚠hex: &#x1F5F4; / dec: &#128500; ):选票脚本X(截至2017年支持不力)
  • ball(⚠hex: &#x1F5F6; / dec: &#128502; ):选票粗体文字X(截至2017年支持不力)
  • ⮽(⚠hex: &#x2BBD; / dec: &#11197; ):带灯光X的投票箱(截至2017年支持不力)
  • 🗵(⚠hex: &#x1F5F5; / dec: &#128501; ):脚本X的投票箱(截至2017年支持不力)
  • 🗹(⚠hex: &#x1F5F9; / dec: &#128505; ):带有粗体检查的投票箱(截至2017年支持不力)
  • ⚠(⚠hex: &#x1F5F7; / dec: &#128503; ):粗体脚本X的投票箱(截至2017年支持不力)

检出Web字体的刻度符号? 下面是一个比较常见的示例: A☐B☑C☒D✓E✔F✗G✘H – 只需将其复制/粘贴到webfont提供程序的示例文本框中,然后查看哪些字体支持哪些刻度符号。

客户端机器需要一个适当的字体,这个字符有一个字形来显示它。 但是,新罗马时代没有。 尝试Arial Unicode MSLucida 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。

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

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

或在CSS中:

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

为什么不使用HTMLinputcheckbox元素在只读模式

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

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

我遇到了同样的问题,并没有build议工作(在Windows XP上的Firefox)。

所以我发现一个可能的解决方法,使用图像数据显示一个小复选标记:

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

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

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

(如果您使用的是数字字符引用,那么使用何种编码并不重要,浏览器将直接从编号中获得正确的Unicode编码点。)

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

如果有人可以在Windows下查看FF,我将不胜感激。 我很确定它不会在非Windows的框中工作。

在Firefox 3,Opera和Safari中我失败了。 奇怪的是,在另一个Webkit浏览器,铬。 在Linux上也是失败的(显然,因为Wingdings没有安装在那里;它安装在Mac上,但是如果Safari没有安装它,这并不会帮助你)。

此外,这是一个非常讨厌的黑客 – 该字符是所有的意图和目的“ü”,并会出现这样的事情,如search引擎,或者如果文本是复制和粘贴。 除非你真的没有别的select,否则适当的Unicode代码点是最好的select。

问题是没有捆绑Windows的字体会提供U + 2713 CHECK MARK('✓')。 唯一一个你可能在Windows机器上find的是“Arial Unicode MS”,这并不是真正的依赖。 所以最后我想你必须要么:

  • 使用一个更好的支持的不同的字符(例如SO所使用的“●” – bullet ),或者
  • 使用图像,用'✓'作为替代文字。

晚会来得很晚,我发现&check; (&check;)在Opera中工作。 我没有在任何其他浏览器上testing过,但对某些人来说可能是有用的。

 .className { content: '✔'; } 

使用CSS内容属性,您可以显示与图像或其他代码标志打勾。

√(平方根符号,&#8730;)是否足够?

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

使用Wingdings的解决scheme不是基于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> ✓ 

你可以使用⊕或⊗