HTML / XHTML의 눈금 기호

279

내부 웹 앱 내에 눈금 기호 (Χ 또는 ✔) 를 표시해야 하며 이미지 사용을 피하는 것이 이상적입니다.

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 이외의 상자에서는 작동하지 않을 것이라고 확신합니다.

html xhtml

— 블라드 구딤
소스

1

진드기 기호는 어떤 모양입니까?

— John Feminella 12

: 당신이 본 html-faq.com/htmlbasics/?specialcharacters

— 샘 슬러

2

샘, 질문 좀 봐봐

— Vlad Gudim

@ Totophil, 나는 그것이 같은 엔티티에 대해 이야기한다는 것을 알고 있지만 서버가 실제 HTTP 헤더를 Content-Type : text / html; charset = utf-8로 보내고 사용중인 글꼴에 포함되지 않을 수도있는 문제를 제안합니다 사용 된 문자의 글리프.

— Sam Hasler 2016 년

여기에 몇 가지가 있습니다 : amp-what.com/#q=check%20mark & # x2713 & # x2714

— ndp

454

잘 지원되지 않는 유니 코드 값을 사용하고 있다고 생각합니다.이 코드는 항상 모든 코드 포인트에 대한 글리프가있는 것은 아닙니다.
다음 문자를 시도하십시오.

☐ ( 유니 코드 16 진수 [HTML decimal : ]의 0x2610☐ ) : 비어있는 (확인되지 않은) 확인란
☑ ( 0x2611 [HTML decimal : ☑]) : 이전 확인란의 확인 된 버전
✓ ( 0x2713 [HTML decimal : ✓])
✔ ( 0x2714 [HTML decimal : ✔])

편집 : 여기 첫 번째 기호 인 ☐ / 0x2610에 약간의 혼란이있는 것 같습니다. 이것은 비어있는 (체크되지 않은) 확인란이므로 상자가 표시되면 보이는 방식입니다. 확인 된 버전 인 ☑ / 0x2611에 해당합니다.

— 존 페미 넬라
소스

1

회사 설정 : Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

— Vlad Gudim

첫 번째는 나에게 상자이며 나머지는 잘 작동합니다. 그래도 이미지를 대신 사용하고 싶습니다.

— mbillard

6

분명하게, 첫 번째 이미지는 상자 여야합니다. 빈 확인란입니다.

— John Feminella

1

@Totophil : 아, 알겠습니다. Ubuntu를 사용하고 있으며 FF에서 구성한 기본 sans 글꼴에 이러한 글리프가 있습니다. Windows에서는 문자표를 사용하여 이러한 글리프를 찾아 원하는 글꼴이 있는지 확인하십시오. 그렇지 않은 경우 다른 것을 선택해야합니다.

— John Feminella

5

빈 상자 10 진수 코드 : 0x2610-> 9744. 따라서 HTML 코드는 ☐0x2611-> 9745 및 HTML 코드☑

— Vikas

272

먼저 HTML 엔티티를 실제로 사용할 필요가 없음을 알아야합니다. HTML 문서의 인코딩이 UTF-8로 올바르게 선언되어 있으면 파일 / 서버 측 스크립트 /에이 기호를 복사 / 붙여 넣기 만하면됩니다. JavaScript / 무엇이든

다음은 이 주제와 관련된 모든 관련 UTF-8 문자 / HTML 엔티티 의 전체 목록입니다 .

☐ (16 진 : ☐/ 12 월 :) : ☐투표함 (비어 있음)
☑ (16 진수 : ☑12 월 :) ☑: 투표함
☒ (16 진수 : ☒12 월 :) ☒: 투표함 x
✓ (16 진수 : ✓/ DEC : ✓) : 확인 표시, 동등 &checkmark;하고 &check;있는 대부분의 브라우저
✔ (16 진수 : ✔12 월 :) ✔: 큰 확인 표시
✗ (16 진수 : ✗12 월 :) ✗: 투표 용지 x
✘ (16 진수 : ✘12 월 :) ✘: 두꺼운 투표지 x
🗸 (⚠ 16 진수 : 🗸/ 12 월 🗸) : 표시 등 확인 표시 (2017 년 기준으로 제대로 지원되지 않음)
✅ (⚠ 16 진수 : ✅/ 12 월 :) ✅: 흰색 무거운 확인 표시 (2017 년 기준 혼합 지원)
🗴 (⚠ hex : 🗴/ dec :) 🗴: 투표 스크립트 X (2017 년 현재 지원되지 않음)
🗶 (⚠ 16 진수 : 🗶/ 12 월 :) 🗶: 투표 용 굵은 체 스크립트 X (2017 년 현재 지원되지 않음)
⮽ (⚠ 16 진수 : ⮽/ 12 월 :) : ⮽라이트 X가있는 투표함 (2017 년 현재 지원되지 않음)
🗵 (⚠ 16 진수 : 🗵/ 12 월 :) : 🗵스크립트 X가 포함 된 투표함 (2017 년 현재 지원되지 않음)
🗹 (⚠ 16 진수 : 🗹/ 12 월 :) : 🗹굵은 체로 표시된 투표함 (2017 년 현재 지원되지 않음)
🗷 (⚠ hex : 🗷/ dec :) : 🗷굵은 스크립트 X가 포함 된 투표함 (2017 년 현재 지원되지 않음)

눈금 기호에 대한 웹 글꼴을 확인하고 있습니까? 보다 일반적인 것들을 위해 샘플을 사용할 준비가되었습니다 : A☐B☑C☒D✓E✔F✗G✘H-이것을 이것을 웹 폰트 제공 업체의 샘플 텍스트 상자에 복사 / 붙여 넣기하고 어떤 글꼴이 어떤 눈금 기호를 지원하는지 확인하십시오.

— 보그 단 스타스 네 스쿠
소스

17

클라이언트 시스템에는이 문자가 표시 할 글리프가있는 적절한 글꼴이 필요합니다. 그러나 Times New Roman은 그렇지 않습니다. 대신 Arial Unicode MS 또는 Lucida Grande 를 사용해보십시오 .

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

이것은 IE 5.5, IE 6.0, FF 3.0.6의 Windows XP에서 작동합니다.

— 검보
소스

원격으로 유니 코드 글꼴처럼 보이지만 진드기가없는 Lucida Sans Unicode 만 글꼴이 없습니다.

— Vlad Gudim

그런 다음이 문자에 대한 그림 문자가있는 일부 글꼴을 나열하십시오 font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.

— Gumbo

검보, 작동하지 않습니다. 게다가 Arial Unicode MS 및 Lucida Grande가 설치되어 있지 않습니다.

— Vlad Gudim

거의 다가올 것입니다. 그러나 불행히도 Lucida Sans Unicode는 U + 2713 / 2714를 제공하지 않습니다.

— bobince

13

나는 보통 fontawesome font ( http://fontawesome.io/icon/check/ )를 사용합니다. html 파일에서 사용할 수 있습니다 :

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

또는 CSS로 :

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

— 스테판
소스

11

읽기 전용 모드에서 HTML 입력 확인란 요소를 사용하지 않는 이유

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

나는 이것이 모든 브라우저에서 작동한다고 가정합니다.

— 드레 카
소스

6

우리는 컨트롤이 필요하지 않으며 매트릭스 내에서 특정 옵션을 사용할 수 있음을 나타냅니다. 이 경우 비활성화 된 컨트롤을 사용하는 것이 잘못되었습니다.

— Vlad Gudim

11

나는 같은 문제가 발생했지만 제안 사항 중 아무것도 작동하지 않았습니다 (Windows XP의 Firefox).

그래서 이미지 데이터를 사용하여 약간의 확인 표시를 표시하는 가능한 해결 방법 을 찾았습니다 .

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

물론 자체 체크 표시 이미지를 만들고 변환기를 사용하여 data : image / gif로 추가 할 수 있습니다. 도움이 되었기를 바랍니다.

— 카이 노악
소스

8

브라우저 인코딩을 UTF-8로 설정하지만

(물론 숫자 참조를 사용하는 경우 어떤 인코딩을 사용하든 상관없이 브라우저는 숫자에서 직접 올바른 유니 코드 코드 포인트를 얻습니다.)

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

누군가 Windows의 FF에서 확인할 수 있다면 고맙겠습니다. Windows 이외의 상자에서는 작동하지 않을 것이라고 확신합니다.

Firefox 3, Opera 및 Safari에서 실패합니다. 흥미롭게도 다른 웹킷 브라우저 인 Chrome에서 작동합니다. Linux에서도 실패합니다 (분명히 Wingdings가 설치되어 있지 않기 때문에 Mac에 설치되어 있지만 Safari에없는 경우 도움이되지 않습니다).

또한 그것은 매우 불쾌한 해킹입니다. 그 성격은 모든 의도와 목적에“ü”이며 검색 엔진과 같은 것들에 나타나거나 텍스트를 복사하여 붙여 넣는 경우에 나타납니다. 실제로 다른 대안이 없다면 적절한 유니 코드 코드 포인트가 사용됩니다.

문제는 Windows와 함께 제공되는 글꼴이 U + 2713 CHECK MARK ( '✓')가 아니라는 것입니다. Windows 컴퓨터에서 찾을 가능성이있는 유일한 것은 "Arial Unicode MS"입니다. 실제로 신뢰할 수는 없습니다. 결국에는 다음 중 하나를 수행해야한다고 생각합니다.

더 잘 지원되는 다른 문자를 사용하십시오 (예 : '●'— bullet , SO에서 사용)
대체 텍스트로 '✓'가있는 이미지를 사용하십시오.

— 보 빈스
소스

8

파티에 늦게 와서, 나는 &check;오페라에서 일 했다는 것을 알았다 . 다른 브라우저에서는 테스트하지 않았지만 일부 사람들에게는 유용 할 수 있습니다.

— 로섬
소스

4

&check;(및 &checkmark;) 둘 다로 평가 한다는 점에 주목할 필요가 ✓있습니다. HTML5 문자 엔터티 이며 IE6에서는 작동하지 않습니다.

— James Donnelly

5

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

CSS 내용 속성을 사용하면 이미지 또는 다른 공동 디자인과 함께 눈금을 표시 할 수 있습니다.

— s-sharma
소스

확실하지 않음 : w3schools.com/cssref/pr_gen_content.asp 는 firefox와 함께 comapatibily를 보여줍니다

— s-sharma

todomvc.com/labs/architecture-examples/react 는 눈금 표시에 콘텐츠를 사용할 때 작동하는지 여부를 확인합니다.

— s-sharma

4

CSS 내용에 utf-8 코드를 사용하려면 다음과 같은 방법이 가능합니다..class{ content: "\2713"; }

— Morteza Ziyae

4

√ (제곱근 기호 & # 8730;)으로 충분합니까?

또는 브라우저로 데이터를 보내기 전에Content-Type: 헤더 를 설정했는지 확인하십시오 . <meta>컨텐츠 유형 태그를 지정하는 것만으로는 브라우저가 올바른 문자 세트를 사용하도록 권장하기에 충분하지 않을 수 있습니다.

— 이안 켐프
소스

감사! 제곱근은 효과가 있지만 조금은 제곱근처럼 보입니다. 그러나 나는 대안이 없을 때 아마도 그것이 가능한 한 가깝다고 생각합니다.

— Vlad Gudim

1

Btw에서 메타 태그를 지정하면 IE에서 UTF-8이 멋지게 설정 되므로이 경우에는 문제가되지 않습니다.

— Vlad Gudim

1

제곱근은 제곱근이고 확인 표시 눈금은 확인 표시 눈금입니다. 화장실 문을 탈의실에 놓는 것 같은 느낌이 듭니다.

— Volker E.

1

@VolkerE. 그러나 그것은 재미있을 것이다!

— Dave Newton

3

유니 코드 기반이 아니며 Wingdings가 설치되지 않은 Linux에서는 작동하지 않는 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> ✓

— 니 산트
소스

0

⊕ 또는 ⊗를 사용할 수 있습니다

— 가브리엘 솔로몬
소스

1

그것들은 진드기 부호가 아니며, 더하기 / 빼기 동그라미입니다.

— GKFX

0

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

— 볼로 마이크
소스

0

WebDing 또는 WingDing 글꼴을 사용하는 것이이 주제의 목표를 달성하는 유일한 방법 입니다. 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>

스 니펫 확장

여기 참조 : 윙딩 웹딩

— 드미트리 바비치
소스