Biểu tượng đánh dấu trong HTML / XHTML

279

Chúng tôi cần hiển thị biểu tượng đánh dấu (✓ hoặc ✔) trong ứng dụng web nội bộ và lý tưởng nhất là tránh sử dụng hình ảnh.

Phải hoạt động bắt đầu với IE 6.0.2900 trên hộp XP, lý tưởng nhất là chúng ta cần nó là trình duyệt chéo (IE + phiên bản gần đây của FF).

Các hộp sau hiển thị mặc dù đặt mã hóa trình duyệt thành UTF-8 (META hoạt động độc đáo và không phải là vấn đề). Phông chữ mặc định là Times New Roman (có thể là một vấn đề, nhưng việc thử Lucida Sans Unicode không giúp được gì và tôi không cài đặt Arial Unicode MS, cũng không cài đặt Lucida Grande).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Bất kỳ trợ giúp đánh giá cao.

Các hoạt động sau đây trong IE 6.0 và IE 7:

<html>
<head>

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

Tôi sẽ đánh giá cao nếu ai đó có thể kiểm tra theo FF trên Windows. Tôi khá chắc chắn rằng nó sẽ không hoạt động trên một hộp không Windows.

html xhtml

— Vlad Gudim
nguồn

1

Một biểu tượng đánh dấu được cho là trông như thế nào?

— John Women'sella

bạn đã thấy điều này chưa: html-faq.com/htmlbasics/?specialchar character

— Sam Hasler

2

Sam, xin hãy xem câu hỏi.

— Vlad Gudim 18/03/2016

@Totophil, tôi biết nó nói về cùng một thực thể, nhưng nó cũng đề nghị máy chủ gửi tiêu đề HTTP thực tế Loại nội dung: text / html; charset = utf-8 cũng như vấn đề mà phông chữ đang sử dụng có thể không chứa glyphs cho các ký tự được sử dụng.

— Sam Hasler

Dưới đây là một cặp vợ chồng: amp-what.com/#q=check%20mark & # x2713 & # x2714

— ndp

454

Tôi nghĩ rằng bạn đang sử dụng các giá trị Unicode được hỗ trợ ít, không phải lúc nào cũng có glyphs cho tất cả các điểm mã.
Hãy thử các ký tự sau:

( 0x2610 ở dạng thập lục phân Unicode [thập phân HTML: ☐]): hộp kiểm trống (không được chọn)
( 0x2611 [HTML thập phân: ☑]): phiên bản đã kiểm tra của hộp kiểm trước đó
✓ ( 0x2713 [thập phân HTML: ✓])
✔ ( 0x2714 [thập phân HTML: ✔])

Chỉnh sửa: Dường như có một số nhầm lẫn về biểu tượng đầu tiên ở đây, / 0x2610. Đây là một hộp kiểm trống (không được kiểm tra), vì vậy nếu bạn thấy một hộp, đó là cách nó phải được nhìn. Đây là phiên bản đối với / 0x2611, đây là phiên bản được kiểm tra.

— John Femaleella
nguồn

1

Thiết lập công ty: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

— Vlad Gudim 18/03/2016

Đầu tiên là một hộp cho tôi, phần còn lại hoạt động tốt. Mặc dù, tôi sẽ sử dụng một hình ảnh thay thế, chỉ để chắc chắn.

— mbillard 18/03/2016

6

Để rõ ràng, hình ảnh đầu tiên được cho là một hộp - đó là một hộp kiểm trống!

— John Women'sella

1

@Totophil: À, được rồi. Tôi đang sử dụng Ubuntu và phông chữ sans mặc định mà tôi đã cấu hình trong FF có các glyph này. Trong Windows, chỉ cần sử dụng bản đồ ký tự để tra cứu các glyph này và xem phông chữ mong muốn của bạn có chúng không. Nếu không, bạn sẽ cần chọn một cái khác.

— John Women'sella

5

Mã thập phân hộp trống: 0x2610 -> 9744. vì vậy mã HTML sẽ trông giống như ☐Tương tự cho hộp đã chọn: 0x2611 -> 9745 & mã HTML☑

— Vikas

272

Trước hết, bạn nên nhận ra rằng bạn thực sự không cần sử dụng các thực thể HTML - miễn là mã hóa tài liệu HTML của bạn được khai báo đúng là UTF-8, bạn chỉ cần sao chép / dán các ký hiệu này vào tập lệnh phía tệp / máy chủ của bạn / JavaScript / bất cứ điều gì.

Phải nói rằng, đây là danh sách đầy đủ của tất cả các thực thể UTF-8 có liên quan đến chủ đề này:

(Hex: ☐/ dec ☐:): thùng phiếu (trống, đó là cách nó được coi là)
(Hex: ☑/ dec ☑:): thùng phiếu có kiểm tra
(Hex: ☒/ dec ☒:): thùng phiếu có x
✓ (hex: ✓/ dec ✓:): đánh dấu, tương đương &checkmark;và &check;trong hầu hết các trình duyệt
✔ (hex: ✔/ dec ✔:): dấu kiểm nặng
(Hex: ✗/ dec ✗:): lá phiếu x
(Hex: ✘/ dec ✘:): lá phiếu nặng x
(Hex: 🗸/ dec 🗸): dấu kiểm sáng (được hỗ trợ kém kể từ năm 2017)
(Hex: ✅/ dec ✅:): dấu kiểm nặng màu trắng (hỗ trợ hỗn hợp kể từ năm 2017)
(Hex: 🗴/ dec 🗴:): kịch bản bỏ phiếu X (được hỗ trợ kém vào năm 2017)
(Hex: 🗶/ dec 🗶:): kịch bản in đậm chữ X (được hỗ trợ kém vào năm 2017)
(Hex: ⮽/ dec ⮽:): thùng phiếu có đèn X (được hỗ trợ kém vào năm 2017)
(Hex: 🗵/ dec 🗵:): thùng phiếu có tập lệnh X (được hỗ trợ kém vào năm 2017)
(Hex: 🗹/ dec 🗹:): thùng phiếu có kiểm tra đậm (được hỗ trợ kém kể từ năm 2017)
(Hex: 🗷/ dec 🗷:): thùng phiếu có chữ in đậm X (được hỗ trợ kém kể từ năm 2017)

Kiểm tra phông chữ web cho các biểu tượng đánh dấu? Đây là mẫu sẵn sàng để sử dụng cho những mẫu phổ biến hơn: A☐B☑C☒D✓E✔F✗G✘H- chỉ cần sao chép / dán mẫu này vào hộp văn bản mẫu của nhà cung cấp webfont của bạn và xem phông chữ nào hỗ trợ ký hiệu đánh dấu nào.

— Bogdan Stăncescu
nguồn

17

Máy khách cần một phông chữ thích hợp có ký hiệu glyph cho ký tự này để hiển thị nó. Nhưng Times New Roman thì không. Thay vào đó, hãy thử Arial Unicode MS hoặc Lucida Grande :

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

Điều này hoạt động với tôi trên Windows XP trong IE 5.5, IE 6.0, FF 3.0.6.

— cây mướp tây
nguồn

Không có phông chữ nào, chỉ có Lucida Sans Unicode trông giống như phông chữ unicode nhưng nó không có dấu tích.

— Vlad Gudim 18/03/2016

Sau đó liệt kê một số phông chữ có ký tự cho ký tự này : font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.

— Gumbo

Gumbo, không hoạt động. Ngoài ra tôi không cài đặt Arial Unicode MS và Lucida Grande.

— Vlad Gudim 18/03/2016

Nó gần như bạn sẽ nhận được, nhưng thật không may, Lucida Sans Unicode không cung cấp U + 2713/2714.

— bobince

13

Tôi thường sử dụng phông chữ fontawesome ( http://fontawesome.io/icon/check/ ), bạn có thể sử dụng nó trong các file html:

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

hoặc trong css:

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

— stefan
nguồn

11

Tại sao bạn không sử dụng phần tử hộp kiểm nhập HTML trong chế độ chỉ đọc

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

Tôi giả sử điều này sẽ hoạt động trên tất cả các trình duyệt.

— Drejc
nguồn

6

Chúng tôi không cần một điều khiển, chỉ cần một dấu hiệu cho thấy một tùy chọn nhất định có sẵn trong một ma trận. Sử dụng một điều khiển bị vô hiệu hóa sẽ là sai trong trường hợp này.

— Vlad Gudim 18/03/2016

11

Tôi gặp vấn đề tương tự và không có gợi ý nào hoạt động (Firefox trên Windows XP).

Vì vậy, tôi đã tìm thấy một cách giải quyết có thể sử dụng dữ liệu hình ảnh để hiển thị một dấu kiểm nhỏ:

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

Tất nhiên bạn có thể tạo hình ảnh dấu kiểm của riêng bạn và sử dụng trình chuyển đổi để thêm nó dưới dạng dữ liệu: image / gif. Hi vọng điêu nay co ich.

— Kai Noack
nguồn

8

mặc dù đặt mã hóa trình duyệt thành UTF-8

(Tất nhiên, nếu bạn đang sử dụng các tham chiếu ký tự số, thì việc sử dụng mã hóa nào đang được sử dụng là không quan trọng, các trình duyệt sẽ nhận được mã hóa Unicode chính xác trực tiếp từ số đó.)

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

Tôi sẽ đánh giá cao nếu ai đó có thể kiểm tra theo FF trên Windows. Tôi khá chắc chắn rằng nó sẽ không hoạt động trên một hộp không Windows.

Thất bại với tôi trong Firefox 3, Opera và Safari. Thật kỳ lạ, hoạt động trong trình duyệt Webkit khác, Chrome. Cũng thất bại trên Linux (rõ ràng, vì Wingdings không được cài đặt ở đó; nó được cài đặt trên máy Mac, nhưng điều đó không giúp ích gì cho bạn nếu Safari không có nó).

Ngoài ra, đây là một hack khá khó chịu - nhân vật đó dành cho tất cả ý định và mục đích của Google ü và sẽ xuất hiện theo cách đó đối với những thứ như công cụ tìm kiếm hoặc nếu văn bản được sao chép và dán. Điểm mã Unicode thích hợp là cách để đi trừ khi bạn thực sự không có lựa chọn nào khác.

Vấn đề là không có phông chữ nào đi kèm với Windows cung cấp U + 2713 CHECK Mark ('✓'). Người duy nhất mà bạn hoàn toàn có thể tìm thấy trên máy Windows là Unicode Arial Unicode MS, điều này không thực sự đáng tin cậy. Vì vậy, cuối cùng tôi nghĩ bạn sẽ phải:

sử dụng một ký tự khác được hỗ trợ tốt hơn (ví dụ: '●' - dấu đầu dòng , như được sử dụng bởi SO), hoặc
sử dụng một hình ảnh, với '✓' làm văn bản thay thế.

— hoàng tử
nguồn

8

Đến bữa tiệc rất muộn, tôi thấy rằng &check;(✓) đã làm việc trong Opera. Tôi chưa thử nghiệm nó trên bất kỳ trình duyệt nào khác, nhưng nó có thể hữu ích cho một số người.

— rossum
nguồn

4

Đáng lưu ý rằng &check;(và &checkmark;) cả hai đánh giá ✓, đó là những gì câu trả lời hàng đầu sử dụng. Đó là một thực thể ký tự HTML5 và sẽ không hoạt động trong IE6.

— James Donnelly

5

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

Sử dụng nội dung CSS Thuộc tính, bạn có thể hiển thị đánh dấu bằng một hình ảnh hoặc mã khác.

— s-sharma
nguồn

Không chắc chắn: w3schools.com/cssref/pr_gen_content.asp hiển thị comapatibily với firefox

— s-sharma

todomvc.com/labs/arch architecture-examples/react kiểm tra xem nó có hoạt động hay không vì họ đang sử dụng nội dung cho dấu tick.

— s-sharma

4

Nếu bạn muốn sử dụng mã utf-8 trong nội dung css, bằng cách này có thể:.class{ content: "\2713"; }

— Morteza Ziyae

4

(Ký hiệu căn bậc hai, & # 8730;) có đủ không?

Ngoài ra, đảm bảo bạn đang đặt Content-Type:tiêu đề trước khi gửi dữ liệu tới trình duyệt. Chỉ xác định <meta>thẻ loại nội dung có thể không đủ để khuyến khích các trình duyệt sử dụng bộ ký tự chính xác.

— Ian Kemp
nguồn

Cảm ơn! Căn bậc hai hoạt động, nhưng trông hơi giống errr ... căn bậc hai? Nhưng tôi đoán trong sự vắng mặt của sự thay thế có lẽ sẽ gần như nó được.

— Vlad Gudim 18/03/2016

1

Btw, chỉ định thẻ meta đặt UTF-8 độc đáo trên IE của tôi, vì vậy trong trường hợp này không phải là vấn đề.

— Vlad Gudim 18/03/2016

1

Một căn bậc hai là một căn bậc hai và một dấu kiểm là một dấu kiểm. Cảm thấy với tôi như đặt một chữ tượng hình nhà vệ sinh lên một cánh cửa phòng thay đồ.

— Volker E.

1

@VolkerE. Nhưng đó sẽ là niềm vui!

— Dave Newton

3

Giải pháp sử dụng Wingdings không dựa trên unicode và không hoạt động trong Linux mà không cài đặt Wingdings.

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> ✓

— Nishant
nguồn

0

bạn có thể sử dụng hoặc

— Gabriel Solomon
nguồn

1

Những dấu hiệu không đánh dấu, chúng được cộng / trừ.

— GKFX

0

Bạn có thể thêm một chút màu trắng với GIF được mã hóa Base64 (trình tạo trực tuyến tại đây ):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

Chẳng hạn, với Chrome, tôi sử dụng nó để tạo kiểu cho điều khiển hộp kiểm:

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;
}

Nếu bạn chỉ muốn nó trong thẻ IMG, bạn sẽ thực hiện đánh dấu / đánh dấu là:

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

— Volomike
nguồn

0

Sử dụng WebDing hoặc WingDing phông chữ là cách duy nhất để đạt được mục tiêu của chủ đề này: nó có làm việc bắt đầu với IE 6.0.2900 . Vì vậy, tôi sẽ đăng một số ở đây, cũng như một số chỉnh sửa để đăng ở trên:

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>

Mở rộng đoạn trích

Tham khảo tại đây: webdings wingdings

— Dmitry Babich
nguồn