HTML / XHTMLのティック記号

279

内部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>

助けてくれてありがとう。

以下は、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、2009年
これを見たことはありますか：html-faq.com/htmlbasics/?specialcharacters
— Sam Hasler
2
サム、質問を見てください。
— ヴラド・グディム2009年
@Totophil、同じエンティティについて話していることは知っていますが、サーバーに実際のHTTPヘッダーContent-Type：text / html; charset = utf-8を送信させることと、使用中のフォントに含まれていない可能性があるという問題も示唆しています使用される文字のグリフ。
— Sam Hasler
：ここではカップルですamp-what.com/#q=check%20mark ＆＃x2713＆＃x2714
— NDP

回答:

454

サポートが不十分なUnicode値を使用していると思います。これは、すべてのコードポイントにグリフがあるとは限らないためです。
次の文字を試してください：

  • ☐（Unicode 16進数の0x2610 [HTML 10進数：&#9744;]）：空の（チェックされていない）チェックボックス
  • ☑（0x2611 [HTML decimal：&#9745;]）：前のチェックボックスのチェックされたバージョン
  • ✓（0x2713 [HTML 10進数：&#10003;]）
  • ✔（0x2714 [HTML 10進数：&#10004;]）

編集：ここの最初のシンボルsome / 0x2610について、いくつかの混乱があるようです。これは空の（チェックされていない）チェックボックスであるため、ボックスが表示された場合は、それが想定されている方法です。チェック済みバージョンである☑/ 0x2611に対応しています。

— ジョン・フェミネラ
ソース
1
企業のセットアップ：Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— Vlad Gudim
最初は私にとって箱です、残りはうまくいきます。代わりに画像を使用しますが、念のためです。
— mbillard 2009年
6
明確にするために、最初の画像はボックスであることになっています-それは空のチェックボックスです！
— John Feminella、2009年
1
@トトフィル：ああ、そうか。私はUbuntuを使用していて、FFで構成したデフォルトのsansフォントにはこれらのグリフがあります。Windowsでは、文字マップを使用してこれらのグリフを検索し、目的のフォントにグリフがあるかどうかを確認します。そうでない場合は、別のものを選択する必要があります。
— John Feminella、2009年
5
空のボックス10進コード：0x2610->9744。HTMLコードは次のよう&#9744;になります。チェックボックスの場合：0x2611-> 9745＆HTMLコード&#9745;
— Vikas
272

最初に、HTMLエンティティを実際に使用する必要がないことを理解する必要があります。HTMLドキュメントのエンコーディングがUTF-8として適切に宣言されている限り、これらのシンボルをファイル/サーバー側スクリプト/にコピー/貼り付けできます。 JavaScript /何でも。

そうは言っても、このトピックに関連するすべての関連するUTF-8文字/ HTMLエンティティの完全なリストは次のとおりです。

  • ☐（16進数：&#x2610;/ 12 進数：）&#9744;：投票箱（空、それが想定されている方法です）
  • ☑（hex：&#x2611;/ dec：）：&#9745;チェック付き投票箱
  • ☒（hex：&#x2612;/ dec ：）：&#9746;x付き投票箱
  • ✓（16進数：&#x2713;/ 12月：&#10003;）：チェックマークと同等&checkmark;と&check;で、ほとんどのブラウザ
  • ✔（hex：&#x2714;/ dec：）&#10004;：重いチェックマーク
  • ✗（hex：&#x2717;/ dec：）&#10007;：投票x
  • hex（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年の時点ではサポートが不十分）

ティックシンボルのWebフォントをチェックアウトしていますか？これは、より一般的なもののすぐに使用できるサンプルですA☐B☑C☒D✓E✔F✗G✘H。-これをWebフォントプロバイダーのサンプルテキストボックスにコピーして貼り付け、どのフォントがどのティックシンボルをサポートしているかを確認します。

— ボグダンスタンセスク
ソース
17

クライアントマシンには、この文字を表示するためのグリフを持つ適切なフォントが必要です。しかし、Times New Romanはそうではありません。代わりにArial Unicode MSまたはLucida 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で動作します。

— ガンボ
ソース
どちらのフォントも持っていません。Unicodeフォントのようにリモートに見えるLucida Sans Unicodeのみですが、目盛りはありません。
— ヴラド・グディム2009年
次に、この文字のグリフを持ついくつかのフォントをリストしますfont-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande。
— ガンボ
ガンボ、動かない。さらに、Arial Unicode MSとLucida Grandeをインストールしていません。
— ヴラド・グディム2009年
それはあなたが手に入れようとしているところに近いですが、残念ながらLucida Sans UnicodeはU + 2713/2714を提供していません。
— ボビンス2009年
11

読み取り専用モードでHTML入力チェックボックス要素を使用しないのはなぜですか

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

これはすべてのブラウザで機能すると思います。

— ドレイク
ソース
6
コントロールは必要ありません。特定のオプションがマトリックス内で使用できることを示すだけです。この場合、無効化されたコントロールを使用することは間違っています。
— ヴラド・グディム2009年
11

私は同じ問題に遭遇し、どの提案も機能しませんでした（Windows XPのFirefox）。

だから私は画像データを使用して小さなチェックマークを表示する可能な回避策を見つけました：

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

もちろん、独自のチェックマーク画像を作成し、コンバーターを使用してdata：image / gifとして追加できます。お役に立てれば。

— カイ・ノアック
ソース
8

ブラウザのエンコーディングをUTF-8に設定しますが

（もちろん、数字参照を使用している場合は、どのエンコーディングが使用されているかは関係ありません。ブラウザは、数値から直接正しいUnicodeコードポイントを取得します。）

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

誰かがWindowsでFFの下をチェックできれば幸いです。私はそれが非Windowsボックスで動作しないことをかなり確信しています。

Firefox 3、Opera、Safariで失敗します。不思議なことに、他のWebkitブラウザであるChromeで動作します。Linuxでも失敗します（当然、Wingdingsはそこにインストールされていないため、Macにインストールされていますが、Safariにない場合は役に立ちません）。

また、これはかなり厄介なハックです。そのキャラクターはすべての意図と目的「ü」に関係しており、検索エンジンのようなものに、またはテキストがコピーアンドペーストされる場合にそのように表示されます。適切なUnicodeコードポイントは、本当に他に方法がない場合を除いて、進むべき道です。

問題は、WindowsにバンドルされているフォントがU + 2713チェックマーク（「✓」）を提供していないことです。Windowsマシンで見つかる可能性が高いのは「Arial Unicode MS」だけですが、これは実際には信頼されません。したがって、最終的には次のいずれかを行う必要があると思います。

  • より適切にサポートされている別の文字を使用する（例：「●」— SOで使用される箇条書き）、または
  • 代替テキストとして「✓」を使用した画像を使用します。
— ボビンス
ソース
8

パーティーに非常に遅くなったとき、私は&check;（✓）Operaで働いていたことがわかりました。他のブラウザではテストしていませんが、一部の人には役立つかもしれません。

— ロッサム
ソース
4
&check;（および&checkmark;）の両方がに評価されることに注目する価値があり&#10003;ます。これはHTML5 文字エンティティであり、IE6では機能しません。
— James Donnelly 2013年
5 
.className {
   content: '\&#x2713';
}

CSSコンテンツプロパティを使用すると、画像またはその他のコードサインで目盛りを表示できます。

— s-sharma
ソース
わからない：w3schools.com/cssref/pr_gen_content.aspがFirefoxと互換性がある
— s-sharma '30
todomvc.com/labs/architecture-examples/reactチェックマークのコンテンツを使用しているため、機能しているかどうかを確認します。
— s-sharma 2013
4
あなたは、CSSのコンテンツでUTF-8のコードを使用したい場合は、この方法は、それが可能です：.class{ content: "\2713"; }
— モルテザZiyae
4

√（平方根記号＆＃8730;）で十分でしょうか？

または、ブラウザにデータを送信する前に、Content-Type:ヘッダーを設定していることを確認してください。content-typeタグを指定するだけでは、ブラウザに正しい文字セットを使用するように促すには不十分な場合があります。<meta>

— イアンケンプ
ソース
ありがとう！平方根は機能しますが、少しエラーに似ています...平方根？しかし、私はおそらくそれが可能な限り近くなるであろう代替案の不在の中で推測します。
— ヴラド・グディム2009年
1
ところで、メタタグを指定すると、IEでUTF-8が適切に設定されるため、この場合は問題ありません。
— ヴラド・グディム2009年
1
平方根は平方根であり、チェックマークの目盛りはチェックマークの目盛りです。トイレのピクトグラムを更衣室のドアにかけるような感じです。
— Volker E.
1
@VolkerE。しかし、それは陽気になるでしょう！
— デイブニュートン
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

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">
— ボロミケ
ソース
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>
スニペットを展開

ここで参照： wingdings webdings

— ドミトリー・バビッチ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.