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>
&#10003; &#10004;
</body>
</html>

感谢任何帮助。

在ie6.0和ie7下的工作如下:

<html>
<head>


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

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

573345 次浏览
小开
我认为您正在使用不太受支持的Unicode值，这些值并不总是为所有代码点提供字形 请尝试以下字符:

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

编辑:这里的第一个符号，你可能对它有一些困惑，即:这是一个空的(未选中的)复选框，所以如果你看到一个框，这就是它应该看起来的样子。它是☑/ 0x2611的对应版本，后者是检查过的版本。

小开

客户端机器需要一种适当的字体，该字体具有用于显示该字符的字形。但是Times New Roman没有。可以试试Arial Unicode MS或最亮的星格兰德:

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

这适用于我的Windows XP在IE 5.5, IE 6.0, FF 3.0.6。

小开

你可以使用⊕或⊗

小开

& # 8730;(平方根符号，√)足够了吗?

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

小开

although设置浏览器编码为UTF-8

(如果你使用的是数字字符引用，当然使用的是什么编码并不重要，浏览器会直接从数字中获得正确的Unicode码点。)

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

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

我在火狐3、Opera和Safari浏览器上都失败了。奇怪的是，它可以在另一个Webkit浏览器Chrome上运行。在Linux上也失败(显然，因为Wingdings没有安装在那里;它安装在mac上，但如果Safari没有它，这对你没有帮助)。

此外，这是一个相当讨厌的黑客——这个字符在任何意图和目的上都是“ü”，并且会以这种方式出现在搜索引擎上，或者如果文本是复制粘贴的。正确的Unicode码位是正确的选择，除非你真的别无选择。

问题是Windows捆绑的字体中没有U+2713 CHECK MARK('✓')。你在Windows机器上唯一可能找到的是“Arial Unicode MS”，这并不是真正的依赖。所以最后我认为你必须:

  • 使用一个更好支持的不同字符(例如。'●' - 子弹，如SO所使用)，或
  • 使用图像，并将“✓”作为Alt文本。
小开

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

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

我认为这在所有浏览器上都可以工作。

小开

来的很晚，我发现&check; (✓)在Opera中工作。我还没有在其他浏览器上测试它，但它可能对一些人有用。

小开

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

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

  • (hex: &#x2610; / dec: &#9744;):投票箱(空的，应该是这样)
  • ☑(hex: &#x2611; / dec: &#9745;):带有复选的投票箱
  • ☒(hex: &#x2612; / dec: &#9746;):带有x的投票箱
  • ✓(hex: &#x2713; / dec: &#10003;):选中标记，等价于大多数浏览器中的&checkmark;和&check;
  • (hex: &#x2714; / dec: &#10004;):重勾号
  • 15 . (hex: &#x2717; / dec: &#10007;
  • 所以，符合英语习惯的习惯(hex: &#x2718; / dec: &#10008;):重票x
  • 🗸(机场当局hex: &#x1F5F8; / dec &#128504;):光检查标记(截至2017年支持较差)
  • ✅(机场当局hex: &#x2705; / dec: &#9989;):白色重复选符号(截至2017年混合支持)
  • 🗴(机场当局hex: &#x1F5F4; / dec: &#128500;):投票脚本X(截至2017年支持较差)
  • 🗶(机场当局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年支持较差)

检查网络字体的标记符号?下面是一个更常见的现成示例:A☐B☑C☒D✓E✔F✗G✘H——只需复制/粘贴到您的webfont提供程序的示例文本框中，并查看哪些字体支持哪些标记符号。

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

使用CSS内容属性，您可以显示tick与图像或其他协同设计。

小开

我也遇到了同样的问题，但这些建议都不起作用(在Windows XP上使用Firefox)。

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

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

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

小开

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

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

或者在css中:

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

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

你可以添加一个小的白色的Base64 Encoded 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">
小开

使用WebDing或闹酒狂欢字体是实现本主题目标的唯一方法:它必须从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><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;">&#252;</div>

< p >参考这里: wingdings webdings < / p >

提交答案