HTML / XHTML中的刻度符号

html HTML

小卤蛋

2020-03-26

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

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

第3776篇《HTML / XHTML中的刻度符号》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
梅JinJin 2020.03.26

你可以用⊕或⊗

小哥路易Gil 2020.03.26

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

斯丁前端 2020.03.26

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

If you just wanted it in an IMG tag, you would do the checkmark/tickmark as:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
LGil 2020.03.26

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

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

神乐 2020.03.26

使用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> ✓
神无达蒙Pro 2020.03.26

我遇到了同样的问题,但所有建议均无效(Windows XP上为Firefox)。

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

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

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

LGil 2020.03.26

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

Near米亚 2020.03.26

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

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

或在CSS中:

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

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

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

  • ☐(十六进制:&#x2610;/ dec :):&#9744;投票箱(为空,应该是这样)
  • ☑(十六进制:&#x2611;/ dec :):&#9745;带支票的投票箱
  • (十六进制:&#x2612;/ dec :):&#9746;带x的投票箱
  • ✓(十六进制:&#x2713;/ DEC: &#10003;):复选标记,等同于&checkmark;&check;大多数浏览器
  • ✔(十六进制:&#x2714;/ dec:):&#10004;复选标记
  • ✗(十六进制:&#x2717;/十进制:) &#10007;:投票x
  • (十六进制:&#x2718;/十进制:) &#10008;:重选x
  • 🗸(⚠十六进制:&#x1F5F8;/ dec &#128504;):复选标记(自2017年起支持不佳)
  • ✅(⚠十六进制:&#x2705;/ dec :)&#9989;:白色粗体复选标记(混合支持,截至2017年)
  • 🗴(⚠十六进制:&#x1F5F4;/ dec :)&#128500;:投票脚本X(自2017年以来支持不佳)
  • 🗶(⚠十六进制:&#x1F5F6;/ dec :):&#128502;粗体投票X(自2017年起支持不佳)
  • ⮽(⚠十六进制:&#x2BBD;/ dec :):&#11197;带灯X的投票箱(自2017年起支持不佳)
  • 🗵(⚠十六进制:&#x1F5F5;/ dec :):&#128501;带脚本X的投票箱(自2017年开始受支持)
  • 🗹(⚠十六进制:&#x1F5F9;/ dec :):&#128505;带粗体格的投票箱(自2017年开始受支持)
  • 🗷(⚠十六进制:&#x1F5F7;/ dec :):&#128503;带粗体字X的投票箱(自2017年起受支持)

是否检出网络字体中的刻度符号?这是可以用于更常见示例的示例:A☐B☑C☒D✓E✔F✗G✘H-只需将其复制/粘贴到webfont提供者的示例文本框中,然后查看哪些字体支持哪些刻度符号。

AL村村 2020.03.26

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

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

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

猴子A 2020.03.26

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android