HTML/XHTML 中的勾號
[英]Tick symbol in 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 盒子。
14 個解決方案
解決方案1
461 2009-03-18 12:30:14
我認為您使用的是不太受支持的 Unicode 值，這些值並不總是具有所有代碼點的字形。
嘗試以下字符：
- ☐（ Unicode十六進制中的 0x2610 [HTML 十進制：
☐]）：一個空的（未選中）復選框 - ☑ ( 0x2611 [HTML decimal:
☑]): 前一個復選框的選中版本 - ✓ ( 0x2713 [HTML 十進制:
✓]) - ✔ ( 0x2714 [HTML 十進制:
✔])
編輯：這里的第一個符號 ☐ / 0x2610 似乎有些混淆。 這是一個空的（未選中的）復選框，所以如果您看到一個框，這就是它應該的樣子。 它是 ☑ / 0x2611 的對應項，即檢查版本。
解決方案2
278 2013-08-18 00:49:51
首先，您應該意識到您實際上並不需要使用 HTML 實體 - 只要您的 HTML 文檔的編碼正確聲明為 UTF-8，您可以簡單地將這些符號復制到您的文件/JavaScript/服務器端任何。
話雖如此，以下是與此主題相關的所有相關 UTF-8 字符/HTML 實體的詳盡列表：
- ☐ (hex:
☐/ dec:☐): 投票箱（空的，應該是這樣的） - ☑ (hex:
☑/ dec:☑): 帶支票的投票箱 - ☒ (hex:
☒/ dec:☒): 帶 x 的投票箱 - ✓ (hex:
✓/ dec:✓)：復選標記，相當於✓✓在大多數瀏覽器中 - ✔ (hex:
✔/ dec:✔): 重復選標記 - ✗ (十六進制:
✗/ 十進制:✗): 選票 x - ✘ (hex:
✘/ dec:✘): 重選票 x - （⚠ hex:
🗸/ dec🗸）：淺色復選標記（截至 2017 年支持不佳） - ✅ (⚠ hex:
✅/ dec:✅)：白色重復選標記（截至 2017 年混合支持） - （⚠ 十六進制：
🗴/ 十進制：🗴）：選票腳本 X（截至 2017 年支持不佳） - (⚠ hex:
🗶/ dec:🗶)：選票粗體腳本 X（截至 2017 年支持不佳） - ⮽ (⚠ hex:
⮽/ dec:⮽)：帶燈 X 的投票箱（截至 2017 年支持不佳） - (⚠ hex:
🗵/ dec:🗵)：帶有腳本 X 的投票箱（截至 2017 年支持不佳） - (⚠ hex:
🗹/ dec:🗹)：帶粗體檢查的投票箱（截至 2017 年支持不佳） - (⚠ hex:
🗷/ dec:🗷)：帶有粗體腳本 X 的投票箱（截至 2017 年支持不佳）
檢查 web fonts 的刻度符號？ 以下是更常見的現成示例： A☐B☑C☒D✓E✔F✗G✘H - 只需將其復制/粘貼到您的網絡字體提供商的示例文本框中，然后查看哪些 fonts 支持哪些刻度符號。
解決方案3
17 2009-03-18 12:30:26
客戶端計算機需要一個適當的字體，該字體具有該字符的字形才能顯示它。 但時代新羅馬沒有。 試試Arial Unicode MS或Lucida Grande ：
<span style="font-family: Arial Unicode MS, Lucida Grande">
✓ ✔
</span>
這適用於 IE 5.5、IE 6.0、FF 3.0.6 中的 Windows XP。
解決方案4
14 2014-06-12 10:00:50
我通常使用 fontawesome 字體（ http://fontawesome.io/icon/check/ ），您可以在 html 文件中使用它：
<i class="fa fa-check"></i>
或在 css 中：
content: "\f00c";
font-family: FontAwesome;
解決方案5
12 2009-03-18 14:33:45
為什么不在只讀模式下使用 HTML 輸入復選框元素
<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />
我認為這將適用於所有瀏覽器。
解決方案6
11 2013-09-28 19:36:16
我遇到了同樣的問題，但沒有任何建議有效（Windows XP 上的 Firefox）。
所以我找到了一個可能的解決方法，使用圖像數據顯示一個小復選標記：
span:before {
content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}
當然，您可以創建自己的復選標記圖像並使用轉換器將其添加為 data:image/gif。 希望這可以幫助。
解決方案7
9 2013-05-23 14:53:56
參加聚會很晚，我發現✓ (✓) 在 Opera 工作。 我沒有在任何其他瀏覽器上測試過它，但它可能對某些人有用。
解決方案8
8 2009-03-18 14:16:46
盡管將瀏覽器編碼設置為 UTF-8
（當然，如果您使用數字字符引用，則使用什么編碼並不重要，瀏覽器將直接從數字中獲得正確的 Unicode 代碼點。）
<span style="font-family: wingdings; font-size: 200%;">ü</span>
如果有人可以在 Windows 上查看 FF，我將不勝感激。 我很確定它不適用於非 Windows 盒子。
我在 Firefox 3、Opera 和 Safari 中失敗了。 奇怪的是，它可以在另一個 Webkit 瀏覽器 Chrome 中運行。 Linux 也失敗（顯然，Wingdings 沒有安裝在那里；它安裝在 Mac 上，但如果 Safari 沒有它，這對你沒有幫助）。
這也是一個非常討厭的 hack——這個字符在所有意圖和目的上都是“ü”，並且會以這種方式出現在搜索引擎之類的東西上，或者如果文本是復制粘貼的。 除非您真的別無選擇，否則正確的 Unicode 代碼點是通往 go 的方法。
問題是沒有與 Windows 捆綁的字體提供 U+2713 CHECK MARK ('✓')。 您可能在 Windows 機器上找到的唯一一個是“Arial Unicode MS”，這並不是真正值得信賴的。 所以最后我認為你必須：
- 使用更好支持的不同字符（例如，'●' —項目符號，如 SO 使用的那樣），或
- 使用圖像，將“✓”作為替代文本。
解決方案9
5 2013-09-25 09:29:29
.className {
content: '\✓';
}
使用 CSS content 屬性，您可以顯示帶有圖像或其他代碼設計的刻度。
解決方案10
5 2015-01-28 10:46:43
使用 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> ✓
解決方案11
5 2009-03-18 13:31:32
√（平方根符號，√）就足夠了嗎？
或者，確保在將數據發送到瀏覽器之前設置Content-Type: header。 僅僅指定<meta>內容類型標簽可能不足以鼓勵瀏覽器使用正確的字符集。
解決方案12
1 2020-05-14 23:28:00
使用WebDing或WingDing fonts 是實現本主題目標的唯一方法：它必須從 IE 6.0.2900 開始工作。 因此，我將在此處發布一些內容，並對上面發布的內容進行一些更正：
Cross <span style="font-family: Wingdings;">û</span><br> Check <span style="font-family: Wingdings;">ü</span><br> Crossed Checkbox <span style="font-family: Wingdings;">ý</span><br> Checked Checkbox <span style="font-family: Wingdings;">þ</span><br> Empty Checkbox <span style="font-family: Wingdings;">¨</span><br> Thick Check <span style="font-family: Webdings;">a</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;">ü</div>
解決方案13
0 2019-06-02 01:48:07
您可以使用 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">
解決方案14
0 2009-03-18 12:31:24
你可以使用⊕或⊗
我可以使用'value'屬性在HTML按鈕上添加'tick'符號嗎？
[英]Can I put a 'tick' symbol on an HTML button using the 'value' attribute?
從HTML轉換為XHTML會更改歐元符號，從而阻止正確的XML解析
[英]Conversion from HTML to XHTML changes euro symbol, preventing correct XML parsing
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.