【html5css3】妙用Unicode字符集(三种方法)

mac2024-06-25  48

前言

这些字符属于 unicode 字符集,所以,你的文档需要声明为 UTF-8;

需要注意的是:

有的字符在不同的浏览器下表现不太一样

比如小雪人☃ 在 firefox 和 Chrome 下不太一样,钻石 ◆ 在 IE 下要比Chrome下要大一点

有的字符在某个浏览器下不会显示;当然原因并不是字符代码的问题,而是浏览器的bug

但是,98%的字符都能在所有浏览器下正常显示的,不过如果你真的要使用,最好仔细在各个浏览器下验证一番

经测试这些字符在 Android/iOS 等智能终端的识别度比较差,所以,使用的时候要特别注意移动浏览器

三种用法

下面符号列表的后面有两列编号,它们并不太一样,可以参考一下代码和总结:

① 代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 测试(before) ✠ 10016 2720 */ .text::before{ content: '\2720 '; color: #000; font-size: 16px; cursor: pointer; } /* 测试(after) ☑ 9745 2611 */ .text::after{ content: '\2611'; color: #a2b6c5; font-size: 16px; cursor: pointer; position: relative; left: 4px; } .unicode{ font-size: 30px; } </style> </head> <body> <div class='text'>文字</div> <!-- 测试 ❄ 10052 2744 --> <div class='unicode'>&#10052</div> <div class='js'></div> <div class='js1'></div> <script> (function(){ // 测试 ♒ 9810 2652 var first = document.querySelector('.js'); var second = document.querySelector('.js1'); first.innerHTML = '\u2652'; second.innerHTML = '&#9810' })() </script> </body> </html>

② 总结:

第一列可以用于 html 也可以用于 javascript 的,你需要在前面加上 &# 符号即可; 第二列可以用于 CSS.content 中,但是需要用反斜杠 \ 转义; 第二列也可以用于 javascript,和CSS用法一样,不过要用 \u 来转义;

③ 图示:

Unicode字符集表

基本形状

9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC ◄ 9668 25C4 ❤ 10084 27649992 27089733 260510022 27269728 26009670 25C6 ◈ 9672 25C8 ▣ 9635 25A3

标点,特殊符号

« 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D ‘ 8216 20188217 20198226 20229702 25E6 ¡ 161 00A1 ¿ 191 00BF ℅ 8453 21058470 2116 & 38 0026 @ 64 00408478 211E ℃ 8451 21038457 2109 ° 176 00B0 | 124 007C ¦ 166 00A6 – 8211 20138212 20148230 2026182 00B6 ∼ 8764 223C ≠ 8800 2260

法律符号

® 174 00AE © 169 00A9 ℗ 8471 2117153 00998480 2120

各种箭头

8672 21E08674 21E28673 21E18675 21E38606 219E ↠ 8608 21A0 ↟ 8607 219F8609 21A1 ← 8592 21908594 21928593 21918595 21938596 21948597 21958644 21C4 ⇅ 8645 21C5 ↢ 8610 21A2 ↣ 8611 21A3 ⇞ 8670 21DE ⇟ 8671 21DF ↫ 8619 21AB ↬ 8620 21AC ⇜ 8668 21DC ⇝ 8669 21DD ↚ 8602 219A ↛ 8603 219B ↮ 8622 21AE ↭ 8621 21AD

形状

8678 21E68680 21E88679 21E78681 21E98631 21B7 ↶ 8630 21B6 ↻ 8635 21BB ↺ 8634 21BA ⟳ 10227 27F310226 27F210224 27F010225 27F18629 21B5 ↯ 8623 21AF ⇵ 8693 21F5

向右的箭头

10132 279410137 279910152 27A8 ➲ 10162 27B2 ➜ 10140 279C ➞ 10142 279E ➟ 10143 279F10144 27A0 ➤ 10148 27A4 ➥ 10149 27A5 ➦ 10150 27A6 ➧ 10151 27A7 ➵ 10165 27B5 ➸ 10168 27B8 ➼ 10172 27BC ➽ 10173 27BD ➺ 10170 27BA ➳ 10163 27B3 ➾ 10174 27BE

货币

$ 36 0024 ¢ 162 00A2 £ 163 00A3 ¤ 164 00A4 € 8364 20AC ¥ 165 00A5 ₱ 8369 20B1 ₹ 8377 20B9

数学

½ 189 00BD ¼ 188 00BC ¾ 190 00BE ⅓ 8531 21538532 21548539 215B ⅜ 8540 215C ⅝ 8541 215D ‰ 8240 2030 % 37 0025 < 60 003C > 62 003E

音乐符号

9833 26699834 266A ♫ 9835 266B ♬ 9836 266C ♭ 9837 266D ♯ 9839 266F

对号、错号

160 00A0 ☐ 9744 26109745 26119746 261210003 271310004 271410005 271510006 271610007 271710008 2718

十字

9768 26289769 262910013 271D ✞ 10014 271E ✟ 10015 271F10016 272010010 271A † 8224 202010018 272210020 272410019 272310021 2725

星星、星号、雪花

9733 260510029 272D ✮ 10030 272E ☆ 9734 260610026 272A ✡ 10017 272110031 272F10037 273510038 273610040 273810041 273910042 273A ✱ 10033 273110034 273210036 273410035 273310043 273B ✽ 10045 273D ❋ 10059 274B ❆ 10054 274610052 274410053 2745

杂项

9787 263B ☺ 9786 263A ☹ 9785 26399993 27099742 260E ☏ 9743 260F9990 270665533 FFFD ☁ 9729 26019730 260210052 27449731 260310056 274810047 273F10048 274010049 27419752 261810086 27669749 974910050 27429765 26259774 262E ☯ 9775 262F9770 262A ☤ 9764 26249988 27049986 27029784 26389875 26939763 26239888 26A0 ⚡ 9889 26A1 ☢ 9762 26229851 267B ♿ 9855 267F9760 2620

手型、铅笔、笔

9756 261C ☞ 9758 261E ☝ 9757 261D ☟ 9759 261F9996 270C ✍ 9997 270D ✎ 9998 270E ✐ 10000 27109999 270F10001 271110002 2712

天空、植物

9789 263D ☾ 9790 263E ♂ 9794 26429792 26409791 263F9793 26419795 26439796 26449797 26459798 26469799 2647

星座

9800 26489801 26499802 264A ♋ 9803 264B ♌ 9804 264C ♍ 9805 264D ♎ 9806 264E ♏ 9807 264F9809 26519810 26529811 2653

象棋,扑克牌

9818 265A ♛ 9819 265B ♜ 9820 265C ♝ 9821 265D ♞ 9822 265E ♟ 9823 265F9812 26549813 26559814 26569815 26579816 26589817 26599824 26609827 26639829 26659830 26669828 26649831 26679825 26619826 2662

希腊字母

Α 913 0391 Β 914 0392 Γ 915 0393 Δ 916 0394 Ε 917 0395 Ζ 918 0396 Η 919 0397 Θ 920 0398 Ι 921 0399 Κ 922 039A Λ 923 039B Μ 924 039C Ν 925 039D Ξ 926 039E Ο 927 039F Π 928 03A0 Ρ 929 03A1 Σ 931 03A3 Τ 932 03A4 Υ 933 03A5 Φ 934 03A6 Χ 935 03A7 Ψ 936 03A8 Ω 937 03A9
最新回复(0)