2020年7月24日星期五

網頁可用的符號

既然發現原來這麼多圖示都只是字, 那麼就來寫個小程式把那些有趣的字都秀出來吧 !
另外，除了這些圖示之外，還有一個有趣的東西叫 **<font color="#0088ff">Emoji Skin Tones.</font>** , 參考網址 : https://www.w3schools.com/charsets/ref_emoji_skin_tones.asp
  
<pre style="border:1px solid #000"><span>&#</span>127999; 🏿 Dark skin tone
<span>&#</span>127998; 🏾 Medium Dark skin tone
<span>&#</span>127997; 🏽 Medium skin tone
<span>&#</span>127996; 🏼 Medium Light skin tone
<span>&#</span>127995; 🏻 Light skin tone
</pre>

除了 Emoji Skin Tones 之外, 還有很多特別的組合, 
  
參考網址 : http://www.get-emoji.com/
參考網址 : https://emojipedia.org/kiss-woman-woman/  
  
例如 :
  
<span>&#</span>x1F468;<span>&#</span>x200D;<span>&#</span>x1F469;<span>&#</span>x200D;<span>&#</span>x1F467;<span>&#</span>x200D;<span>&#</span>x1F466;

拆開是 : <font size="6m">👨 ‍ 👩 ‍ 👧 ‍ 👦</font>
  
合起來會出現 <font size="6m">👨‍👩‍👧‍👦</font>
  
<style>
.a07241_0
{
  font-size:3em;
}
</style>

<span>&#</span>128102;<span>&#</span>127998; 
<span class="a07241_0">👦🏾</span> 
Medium Dark skin tone<br>

<span>&#</span>128102;<span>&#</span>127997; 
<span class="a07241_0">👦🏽</span> 
Medium skin tone<br>

<span>&#</span>128102;<span>&#</span>127996;
<span class="a07241_0">👦🏼</span> 
Medium Light skin tone<br>

<span>&#</span>128102;<span>&#</span>127995;
<span class="a07241_0">👦🏻</span> 
Light skin tone<br>

</div><br>
  
<style>
#a07241_1 button
{
  font-size:1.3em;
  width:5em;
  margin:2px;
}
#a07241_2
{
  font-size:2em;
/*  
  font-family:"Noto Sans TC";
*/  
}
.a07241_3
{
  display:inline-block;
}
</style>
<div id="a07241_1">
🤍
🪤
</div><br>

for (i in r)
  {
    hh+="<button>"+i+"</button> ";
  }
  $("#a07241_1").html(hh);

function run(b,e)
  {
    hh="";
    for (i=b;i<e;i++)
    {
//    if ((i%50)==0) hh+=" "+i+" ";
      hh+="<div class='a07241_3'>";
      hh+="&#"+i+"; ";
      hh+="</div>";
    }

$("#a07241_2").html(hh);
  }
  function run1(b,e)
  {
    let j;

hh="";
    for (i=b;i<=0xddff;i++)
    {
      for (j=e;j<=0xddff;j++)
      {
        let h1=String.fromCharCode(0xd83c,i,0xd83c,j);
        hh+=h1+" ";
      }
    }
    $("#a07241_2").html(hh);
  }

$("#a07241_1 button").on("click",function()
  {
    let n=parseInt($(this).html());
    if (n<10)
    {
      run(r[n][0],r[n][1]);
    }
    else
    {
      run1(r[n][0],r[n][1]);
    }
  });

run(r[9][0],r[9][1]);

})()
</script>

既然發現原來這麼多圖示都只是字, 那麼就來寫個小程式把那些有趣的字都秀出來吧 ! 另外，除了這些圖示之外，還有一個有趣的東西叫 Emoji Skin Tones. , 參考網址 : https://www.w3schools.com/charsets/ref_emoji_skin_tones.asp

&#127999; 🏿 Dark skin tone
&#127998; 🏾 Medium Dark skin tone
&#127997; 🏽 Medium skin tone
&#127996; 🏼 Medium Light skin tone
&#127995; 🏻 Light skin tone

除了 Emoji Skin Tones 之外, 還有很多特別的組合,

參考網址 : http://www.get-emoji.com/ 參考網址 : https://emojipedia.org/kiss-woman-woman/

例如 :

👨‍👩‍👧‍👦

拆開是 : 👨 ‍ 👩 ‍ 👧 ‍ 👦

合起來會出現 👨‍👩‍👧‍👦

👦 👦 No skin tone

👦🏿 👦🏿 Dark skin tone

👦🏾 👦🏾 Medium Dark skin tone

👦🏽 👦🏽 Medium skin tone

👦🏼 👦🏼 Medium Light skin tone

👦🏻 👦🏻 Light skin tone

𞿦

𞿧

𞿨

𞿩

𞿪

𞿫

𞿬

𞿭

𞿮

𞿯

𞿰

𞿱

𞿲

𞿳

𞿴

𞿵

𞿶

𞿷

𞿸

𞿹

𞿺

𞿻

𞿼

𞿽

𞿾

𞿿

🀀

🀁

🀂

🀃

🀄

🀅

🀆

🀇

🀈

🀉

🀊

🀋

🀌

🀍

🀎

🀏

🀐

🀑

🀒

🀓

🀔

🀕

🀖

🀗

🀘

🀙

🀚

🀛

🀜

🀝

🀞

🀟

🀠

🀡

🀢

🀣

🀤

🀥

🀦

🀧

🀨

🀩

🀪

🀫

🀬

🀭

🀮

🀯

🀰

🀱

🀲

🀳

🀴

🀵

🀶

🀷

🀸

🀹

🀺

🀻

🀼

🀽

🀾

🀿

🁀

🁁

🁂

🁃

🁄

🁅

🁆

🁇

🁈

🁉

🁊

🁋

🁌

🁍

🁎

🁏

🁐

🁑

🁒

🁓

🁔

🁕

🁖

🁗

🁘

🁙

🁚

🁛

🁜

🁝

🁞

🁟

🁠

🁡

🁢

🁣

🁤

🁥

🁦

🁧

🁨

🁩

🁪

🁫

🁬

🁭

🁮

🁯

🁰

🁱

🁲

🁳

🁴

🁵

🁶

🁷

🁸

🁹

🁺

🁻

🁼

🁽

🁾

🁿

🂀

🂁

🂂

🂃

🂄

🂅

🂆

🂇

🂈

🂉

🂊

🂋

🂌

🂍

🂎

🂏

🂐

🂑

🂒

🂓

🂔

🂕

🂖

🂗

🂘

🂙

🂚

🂛

🂜

🂝

🂞

🂟

🂠

🂡

🂢

🂣

🂤

🂥

🂦

🂧

🂨

🂩

🂪

🂫

🂬

🂭

🂮

🂯

🂰

🂱

🂲

🂳

🂴

🂵

🂶

🂷

🂸

🂹

🂺

🂻

🂼

🂽

🂾

🂿

🃀

🃁

🃂

🃃

🃄

🃅

🃆

🃇

🃈

🃉

🃊

🃋

🃌

🃍

🃎

🃏

🃐

🃑

🃒

🃓

🃔

🃕

🃖

🃗

🃘

🃙

🃚

🃛

🃜

🃝

🃞

🃟

🃠

🃡

🃢

🃣

🃤

🃥

🃦

🃧

🃨

🃩

🃪

🃫

🃬

🃭

🃮

🃯

🃰

🃱

🃲

🃳

🃴

🃵

🃶

🃷

🃸

🃹

🃺

🃻

🃼

🃽

🃾

🃿

🄀

🄁

🄂

🄃

🄄

🄅

🄆

🄇

🄈

🄉

🄊

🄋

🄌

🄍

🄎

🄏

🄐

🄑

🄒

🄓

🄔

🄕

🄖

🄗

🄘

🄙

🄚

🄛

🄜

🄝

🄞

🄟

🄠

🄡

🄢

🄣

🄤

🄥

🄦

🄧

🄨

🄩

🄪

🄫

🄬

🄭

🄮

🄯

🄰

🄱

🄲

🄳

🄴

🄵

🄶

🄷

🄸

🄹

🄺

🄻

🄼

🄽

🄾

🄿

🅀

🅁

🅂

🅃

🅄

🅅

🅆

🅇

🅈

🅉

🅊

🅋

🅌

🅍

🅎

🅏

🅐

🅑

🅒

🅓

🅔

🅕

🅖

🅗

🅘

🅙

🅚

🅛

🅜

🅝

🅞

🅟

🅠

🅡

🅢

🅣

🅤

🅥

🅦

🅧

🅨

🅩

🅪

🅫

🅬

🅭

🅮

🅯

🅰

🅱

🅲

🅳

🅴

🅵

🅶

🅷

🅸

🅹

🅺

🅻

🅼

🅽

🅾

🅿

🆀

🆁

🆂

🆃

🆄

🆅

🆆

🆇

🆈

🆉

🆊

🆋

🆌

🆍

🆎

🆏

🆐

🆑

🆒

🆓

🆔

🆕

🆖

🆗

🆘

🆙

🆚

🆛

🆜

🆝

🆞

🆟

🆠

🆡

🆢

🆣

🆤

🆥

🆦

🆧

🆨

🆩

🆪

🆫

🆬

🆭

🆮

🆯

🆰

🆱

🆲

🆳

🆴

🆵

🆶

🆷

🆸

🆹

🆺

🆻

🆼

🆽

🆾

🆿

🇀

🇁

🇂

🇃

🇄

🇅

🇆

🇇

🇈

🇉

🇊

🇋

🇌

🇍

🇎

🇏

🇐

🇑

🇒

🇓

🇔

🇕

🇖

🇗

🇘

🇙

🇚

🇛

🇜

🇝

🇞

🇟

🇠

🇡

🇢

🇣

🇤

🇥

🇦

🇧

🇨

🇩

🇪

🇫

🇬

🇭

🇮

🇯

🇰

🇱

🇲

🇳

🇴

🇵

🇶

🇷

🇸

🇹

🇺

🇻

🇼

🇽

🇾

🇿

🈀

🈁

🈂

🈃

🈄

🈅

🈆

🈇

🈈

🈉

🈊

🈋

🈌

🈍

🈎

🈏

🈐

🈑

🈒

🈓

🈔

🈕

🈖

🈗

🈘

🈙

🈚

🈛

🈜

🈝

🈞

🈟

🈠

🈡

🈢

🈣

🈤

🈥

🈦

🈧

🈨

🈩

🈪

🈫

🈬

🈭

🈮

🈯

🈰

🈱

🈲

🈳

🈴

🈵

🈶

🈷

🈸

🈹

🈺

🈻

🈼

🈽

🈾

🈿

🉀

🉁

🉂

🉃

🉄

🉅

🉆

🉇

🉈

🉉

🉊

🉋

🉌

🉍

🉎

🉏

🉐

🉑

🉒

🉓

🉔

🉕

🉖

🉗

🉘

🉙

🉚

🉛

🉜

🉝

🉞

🉟

🉠

🉡

🉢

🉣

🉤

🉥

🉦

🉧

🉨

🉩

🉪

🉫

🉬

🉭

🉮

🉯

🉰

🉱

🉲

🉳

🉴

🉵

🉶

🉷

🉸

🉹

🉺

🉻

🉼

🉽

🉾

🉿

🊀

🊁

🊂

🊃

🊄

🊅

🊆

🊇

🊈

🊉

🊊

🊋

🊌

🊍

🊎

🊏

🊐

🊑

🊒

🊓

🊔

🊕

🊖

🊗

🊘

🊙

🊚

🊛

🊜

🊝

🊞

🊟

🊠

🊡

🊢

🊣

🊤

🊥

🊦

🊧

🊨

🊩

🊪

🊫

🊬

🊭

🊮

🊯

🊰

🊱

🊲

🊳

🊴

🊵

🊶

🊷

🊸

🊹

🊺

🊻

🊼

🊽

🊾

🊿

🋀

🋁

🋂

🋃

🋄

🋅

🋆

🋇

🋈

🋉

🋊

🋋

🋌

🋍

🋎

🋏

🋐

🋑

🋒

🋓

🋔

🋕

🋖

🋗

🋘

🋙

🋚

🋛

🋜

🋝

🋞

🋟

🋠

🋡

🋢

🋣

🋤

🋥

🋦

🋧

🋨

🋩

🋪

🋫

🋬

🋭

🋮

🋯

🋰

🋱

🋲

🋳

🋴

🋵

🋶

🋷

🋸

🋹

🋺

🋻

🋼

🋽

🋾

🋿

🌀

🌁

🌂

🌃

🌄

🌅

🌆

🌇

🌈

🌉

🌊

🌋

🌌

🌍

🌎

🌏

🌐

🌑

🌒

🌓

🌔

🌕

🌖

🌗

🌘

🌙

🌚

🌛

🌜

🌝

🌞

🌟

🌠

🌡

🌢

🌣

🌤

🌥

🌦

🌧

🌨

🌩

🌪

🌫

🌬

🌭

🌮

🌯

🌰

🌱

🌲

🌳

🌴

🌵

🌶

🌷

🌸

🌹

🌺

🌻

🌼

🌽

🌾

🌿

🍀

🍁

🍂

🍃

🍄

🍅

🍆

🍇

🍈

🍉

🍊

🍋

🍌

🍍

🍎

🍏

🍐

🍑

🍒

🍓

🍔

🍕

🍖

🍗

🍘

🍙

🍚

🍛

🍜

🍝

🍞

🍟

🍠

🍡

🍢

🍣

🍤

🍥

🍦

🍧

🍨

🍩

🍪

🍫

🍬

🍭

🍮

🍯

🍰

🍱

🍲

🍳

🍴

🍵

🍶

🍷

🍸

🍹

🍺

🍻

🍼

🍽

🍾

🍿

🎀

🎁

🎂

🎃

🎄

🎅

🎆

🎇

🎈

🎉

🎊

🎋

🎌

🎍

🎎

🎏

🎐

🎑

🎒

🎓

🎔

🎕

🎖

🎗

🎘

🎙

🎚

🎛

🎜

🎝

🎞

🎟

🎠

🎡

🎢

🎣

🎤

🎥

🎦

🎧

🎨

🎩

🎪

🎫

🎬

🎭

🎮

🎯

🎰

🎱

🎲

🎳

🎴

🎵

🎶

🎷

🎸

🎹

🎺

🎻

🎼

🎽

🎾

🎿

🏀

🏁

🏂

🏃

🏄

🏅

🏆

🏇

🏈

🏉

🏊

🏋

🏌

🏍

🏎

🏏

🏐

🏑

🏒

🏓

🏔

🏕

🏖

🏗

🏘

🏙

🏚

🏛

🏜

🏝

🏞

🏟

🏠

🏡

🏢

🏣

🏤

🏥

🏦

🏧

🏨

🏩

🏪

🏫

🏬

🏭

🏮

🏯

🏰

🏱

🏲

🏳

🏴

🏵

🏶

🏷

🏸

🏹

🏺

🏻

🏼

🏽

🏾

🏿

🐀

🐁

🐂

🐃

🐄

🐅

🐆

🐇

🐈

🐉

🐊

🐋

🐌

🐍

🐎

🐏

🐐

🐑

🐒

🐓

🐔

🐕

🐖

🐗

🐘

🐙

🐚

🐛

🐜

🐝

🐞

🐟

🐠

🐡

🐢

🐣

🐤

🐥

🐦

🐧

🐨

🐩

🐪

🐫

🐬

🐭

🐮

🐯

🐰

🐱

🐲

🐳

🐴

🐵

🐶

🐷

🐸

🐹

🐺

🐻

🐼

🐽

🐾

🐿

👀

👁

👂

👃

👄

👅

👆

👇

👈

👉

👊

👋

👌

👍

👎

👏

👐

👑

👒

👓

👔

👕

👖

👗

👘

👙

👚

👛

👜

👝

👞

👟

👠

👡

👢

👣

👤

👥

👦

👧

👨

👩

👪

👫

👬

👭

👮

👯

👰

👱

👲

👳

👴

👵

👶

👷

👸

👹

👺

👻

👼

👽

👾

👿

💀

💁

💂

💃

💄

💅

💆

💇

💈

💉

💊

💋

💌

💍

💎

💏

💐

💑

💒

💓

💔

💕

💖

💗

💘

💙

💚

💛

💜

💝

💞

💟

💠

💡

💢

💣

💤

💥

💦

💧

💨

💩

💪

💫

💬

💭

💮

💯

💰

💱

💲

💳

💴

💵

💶

💷

💸

💹

💺

💻

💼

💽

💾

💿

📀

📁

📂

📃

📄

📅

📆

📇

📈

📉

📊

📋

📌

📍

📎

📏

📐

📑

📒

📓

📔

📕

📖

📗

📘

📙

📚

📛

📜

📝

📞

📟

📠

📡

📢

📣

📤

📥

📦

📧

📨

📩

📪

📫

📬

📭

📮

📯

📰

📱

📲

📳

📴

📵

📶

📷

📸

📹

📺

📻

📼

📽

📾

📿

🔀

🔁

🔂

🔃

🔄

🔅

🔆

🔇

🔈

🔉

🔊

🔋

🔌

🔍

🔎

🔏

🔐

🔑

🔒

🔓

🔔

🔕

🔖

🔗

🔘

🔙

🔚

🔛

🔜

🔝

🔞

🔟

🔠

🔡

🔢

🔣

🔤

🔥

🔦

🔧

🔨

🔩

🔪

🔫

🔬

🔭

🔮

🔯

🔰

🔱

🔲

🔳

🔴

🔵

🔶

🔷

🔸

🔹

🔺

🔻

🔼

🔽

🔾

🔿

🕀

🕁

🕂

🕃

🕄

🕅

🕆

🕇

🕈

🕉

🕊

🕋

🕌

🕍

🕎

🕏

🕐

🕑

🕒

🕓

🕔

🕕

🕖

🕗

🕘

🕙

🕚

🕛

🕜

🕝

🕞

🕟

🕠

🕡

🕢

🕣

🕤

🕥

🕦

🕧

🕨

🕩

🕪

🕫

🕬

🕭

🕮

🕯

🕰

🕱

🕲

🕳

🕴

🕵

🕶

🕷

🕸

🕹

🕺

🕻

🕼

🕽

🕾

🕿

🖀

🖁

🖂

🖃

🖄

🖅

🖆

🖇

🖈

🖉

🖊

🖋

🖌

🖍

🖎

🖏

🖐

🖑

🖒

🖓

🖔

🖕

🖖

🖗

🖘

🖙

🖚

🖛

🖜

🖝

🖞

🖟

🖠

🖡

🖢

🖣

🖤

🖥

🖦

🖧

🖨

🖩

🖪

🖫

🖬

🖭

🖮

🖯

🖰

🖱

🖲

🖳

🖴

🖵

🖶

🖷

🖸

🖹

🖺

🖻

🖼

🖽

🖾

🖿

🗀

🗁

🗂

🗃

🗄

🗅

🗆

🗇

🗈

🗉

🗊

🗋

🗌

🗍

🗎

🗏

🗐

🗑

🗒

🗓

🗔

🗕

🗖

🗗

🗘

🗙

🗚

🗛

🗜

🗝

🗞

🗟

🗠

🗡

🗢

🗣

🗤

🗥

🗦

🗧

🗨

🗩

🗪

🗫

🗬

🗭

🗮

🗯

🗰

🗱

🗲

🗳

🗴

🗵

🗶

🗷

🗸

🗹

🗺

🗻

🗼

🗽

🗾

🗿

😀

😁

😂

😃

😄

😅

😆

😇

😈

😉

😊

😋

😌

😍

😎

😏

😐

😑

😒

😓

😔

😕

😖

😗

😘

😙

😚

😛

😜

😝

😞

😟

😠

😡

😢

😣

😤

😥

😦

😧

😨

😩

😪

😫

😬

😭

😮

😯

😰

😱

😲

😳

😴

😵

😶

😷

😸

😹

😺

😻

😼

😽

😾

😿

🙀

🙁

🙂

🙃

🙄

🙅

🙆

🙇

🙈

🙉

🙊

🙋

🙌

🙍

🙎

🙏

🙐

🙑

🙒

🙓

🙔

🙕

🙖

🙗

🙘

🙙

🙚

🙛

🙜

🙝

🙞

🙟

🙠

🙡

🙢

🙣

🙤

🙥

🙦

🙧

🙨

🙩

🙪

🙫

🙬

🙭

🙮

🙯

🙰

🙱

🙲

🙳

🙴

🙵

🙶

🙷

🙸

🙹

🙺

🙻

🙼

🙽

🙾

🙿

🚀

🚁

🚂

🚃

🚄

🚅

🚆

🚇

🚈

🚉

🚊

🚋

🚌

🚍

🚎

🚏

🚐

🚑

🚒

🚓

🚔

🚕

🚖

🚗

🚘

🚙

🚚

🚛

🚜

🚝

🚞

🚟

🚠

🚡

🚢

🚣

🚤

🚥

🚦

🚧

🚨

🚩

🚪

🚫

🚬

🚭

🚮

🚯

🚰

🚱

🚲

🚳

🚴

🚵

🚶

🚷

🚸

🚹

🚺

🚻

🚼

🚽

🚾

🚿

🛀

🛁

🛂

🛃

🛄

🛅

🛆

🛇

🛈

🛉

🛊

🛋

🛌

🛍

🛎

🛏

🛐

🛑

🛒

🛓

🛔

🛕

🛖

🛗

🛘

🛙

🛚

🛛

🛜

🛝

🛞

🛟

🛠

🛡

🛢

🛣

🛤

🛥

🛦

🛧

🛨

🛩

🛪

🛫

🛬

🛭

🛮

🛯

🛰

🛱

🛲

🛳

🛴

🛵

🛶

🛷

🛸

🛹

🛺

🛻

🛼

🛽

🛾

🛿

🜀

🜁

🜂

🜃

🜄

🜅

🜆

🜇

🜈

🜉

🜊

🜋

🜌

🜍

🜎

🜏

🜐

🜑

🜒

🜓

🜔

🜕

🜖

🜗

🜘

🜙

🜚

🜛

🜜

🜝

🜞

🜟

🜠

🜡

🜢

🜣

🜤

🜥

🜦

🜧

🜨

🜩

🜪

🜫

🜬

🜭

🜮

🜯

🜰

🜱

🜲

🜳

🜴

🜵

🜶

🜷

🜸

🜹

🜺

🜻

🜼

🜽

🜾

🜿

🝀

🝁

🝂

🝃

🝄

🝅

🝆

🝇

🝈

🝉

🝊

🝋

🝌

🝍

🝎

🝏

🝐

🝑

🝒

🝓

🝔

🝕

🝖

🝗

🝘

🝙

🝚

🝛

🝜

🝝

🝞

🝟

🝠

🝡

🝢

🝣

🝤

🝥

🝦

🝧

🝨

🝩

🝪

🝫

🝬

🝭

🝮

🝯

🝰

🝱

🝲

🝳

🝴

🝵

🝶

🝷

🝸

🝹

🝺

🝻

🝼

🝽

🝾

🝿

🞀

🞁

🞂

🞃

🞄

🞅

🞆

🞇

🞈

🞉

🞊

🞋

🞌

🞍

🞎

🞏

🞐

🞑

🞒

🞓

🞔

🞕

🞖

🞗

🞘

🞙

🞚

🞛

🞜

🞝

🞞

🞟

🞠

🞡

🞢

🞣

🞤

🞥

🞦

🞧

🞨

🞩

🞪

🞫

🞬

🞭

🞮

🞯

🞰

🞱

🞲

🞳

🞴

🞵

🞶

🞷

🞸

🞹

🞺

🞻

🞼

🞽

🞾

🞿

🟀

🟁

🟂

🟃

🟄

🟅

🟆

🟇

🟈

🟉

🟊

🟋

🟌

🟍

🟎

🟏

🟐

🟑

🟒

🟓

🟔

🟕

🟖

🟗

🟘

🟙

🟚

🟛

🟜

🟝

🟞

🟟

🟠

🟡

🟢

🟣

🟤

🟥

🟦

🟧

🟨

🟩

🟪

🟫

🟬

🟭

🟮

🟯

🟰

🟱

🟲

🟳

🟴

🟵

🟶

🟷

🟸

🟹

🟺

🟻

🟼

🟽

🟾

🟿

🠀

🠁

🠂

🠃

🠄

🠅

🠆

🠇

🠈

🠉

🠊

🠋

🠌

🠍

🠎

🠏

🠐

🠑

🠒

🠓

🠔

🠕

🠖

🠗

🠘

🠙

🠚

🠛

🠜

🠝

🠞

🠟

🠠

🠡

🠢

🠣

🠤

🠥

🠦

🠧

🠨

🠩

🠪

🠫

🠬

🠭

🠮

🠯

🠰

🠱

🠲

🠳

🠴

🠵

🠶

🠷

🠸

🠹

🠺

🠻

🠼

🠽

🠾

🠿

🡀

🡁

🡂

🡃

🡄

🡅

🡆

🡇

🡈

🡉

🡊

🡋

🡌

🡍

🡎

🡏

🡐

🡑

🡒

🡓

🡔

🡕

🡖

🡗

🡘

🡙

🡚

🡛

🡜

🡝

🡞

🡟

🡠

🡡

🡢

🡣

🡤

🡥

🡦

🡧

🡨

🡩

🡪

🡫

🡬

🡭

🡮

🡯

🡰

🡱

🡲

🡳

🡴

🡵

🡶

🡷

🡸

🡹

🡺

🡻

🡼

🡽

🡾

🡿

🢀

🢁

🢂

🢃

🢄

🢅

🢆

🢇

🢈

🢉

🢊

🢋

🢌

🢍

🢎

🢏

🢐

🢑

🢒

🢓

🢔

🢕

🢖

🢗

🢘

🢙

🢚

🢛

🢜

🢝

🢞

🢟

🢠

🢡

🢢

🢣

🢤

🢥

🢦

🢧

🢨

🢩

🢪

🢫

🢬

🢭

🢮

🢯

🢰

🢱

🢲

🢳

🢴

🢵

🢶

🢷

🢸

🢹

🢺

🢻

🢼

🢽

🢾

🢿

🣀

🣁

🣂

🣃

🣄

🣅

🣆

🣇

🣈

🣉

🣊

🣋

🣌

🣍

🣎

🣏

🣐

🣑

🣒

🣓

🣔

🣕

🣖

🣗

🣘

🣙

🣚

🣛

🣜

🣝

🣞

🣟

🣠

🣡

🣢

🣣

🣤

🣥

🣦

🣧

🣨

🣩

🣪

🣫

🣬

🣭

🣮

🣯

🣰

🣱

🣲

🣳

🣴

🣵

🣶

🣷

🣸

🣹

🣺

🣻

🣼

🣽

🣾

🣿

🤀

🤁

🤂

🤃

🤄

🤅

🤆

🤇

🤈

🤉

🤊

🤋

🤌

🤍

🤎

🤏

🤐

🤑

🤒

🤓

🤔

🤕

🤖

🤗

🤘

🤙

🤚

🤛

🤜

🤝

🤞

🤟

🤠

🤡

🤢

🤣

🤤

🤥

🤦

🤧

🤨

🤩

🤪

🤫

🤬

🤭

🤮

🤯

🤰

🤱

🤲

🤳

🤴

🤵

🤶

🤷

🤸

🤹

🤺

🤻

🤼

🤽

🤾

🤿

🥀

🥁

🥂

🥃

🥄

🥅

🥆

🥇

🥈

🥉

🥊

🥋

🥌

🥍

🥎

🥏

🥐

🥑

🥒

🥓

🥔

🥕

🥖

🥗

🥘

🥙

🥚

🥛

🥜

🥝

🥞

🥟

🥠

🥡

🥢

🥣

🥤

🥥

🥦

🥧

🥨

🥩

🥪

🥫

🥬

🥭

🥮

🥯

🥰

🥱

🥲

🥳

🥴

🥵

🥶

🥷

🥸

🥹

🥺

🥻

🥼

🥽

🥾

🥿

🦀

🦁

🦂

🦃

🦄

🦅

🦆

🦇

🦈

🦉

🦊

🦋

🦌

🦍

🦎

🦏

🦐

🦑

🦒

🦓

🦔

🦕

🦖

🦗

🦘

🦙

🦚

🦛

🦜

🦝

🦞

🦟

🦠

🦡

🦢

🦣

🦤

🦥

🦦

🦧

🦨

🦩

🦪

🦫

🦬

🦭

🦮

🦯

🦰

🦱

🦲

🦳

🦴

🦵

🦶

🦷

🦸

🦹

🦺

🦻

🦼

🦽

🦾

🦿

🧀

🧁

🧂

🧃

🧄

🧅

🧆

🧇

🧈

🧉

🧊

🧋

🧌

🧍

🧎

🧏

🧐

🧑

🧒

🧓

🧔

🧕

🧖

🧗

🧘

🧙

🧚

🧛

🧜

🧝

🧞

🧟

🧠

🧡

🧢

🧣

🧤

🧥

🧦

🧧

🧨

🧩

🧪

🧫

🧬

🧭

🧮

🧯

🧰

🧱

🧲

🧳

🧴

🧵

🧶

🧷

🧸

🧹

🧺

🧻

🧼

🧽

🧾

🧿

🨀

🨁

🨂

🨃

🨄

🨅

🨆

🨇

🨈

🨉

🨊

🨋

🨌

🨍

🨎

🨏

🨐

🨑

🨒

🨓

🨔

🨕

🨖

🨗

🨘

🨙

🨚

🨛

🨜

🨝

🨞

🨟

🨠

🨡

🨢

🨣

🨤

🨥

🨦

🨧

🨨

🨩

🨪

🨫

🨬

🨭

🨮

🨯

🨰

🨱

🨲

🨳

🨴

🨵

🨶

🨷

🨸

🨹

🨺

🨻

🨼

🨽

🨾

🨿

🩀

🩁

🩂

🩃

🩄

🩅

🩆

🩇

🩈

🩉

🩊

🩋

🩌

🩍

🩎

🩏

🩐

🩑

🩒

🩓

🩔

🩕

🩖

🩗

🩘

🩙

🩚

🩛

🩜

🩝

🩞

🩟

🩠

🩡

🩢

🩣

🩤

🩥

🩦

🩧

🩨

🩩

🩪

🩫

🩬

🩭

🩮

🩯

🩰

🩱

🩲

🩳

🩴

🩵

🩶

🩷

🩸

🩹

🩺

🩻

🩼

🩽

🩾

🩿

🪀

🪁

🪂

🪃

🪄

🪅

🪆

🪇

🪈

🪉

🪊

🪋

🪌

🪍

🪎

🪏

🪐

🪑

🪒

🪓

🪔

🪕

🪖

🪗

🪘

🪙

🪚

🪛

🪜

🪝

🪞

🪟

🪠

🪡

🪢

🪣

2020年7月23日星期四

網頁可用的符號資源收集

無意間看到這幾個網站，很驚訝原來系統中本來就有這些**<font color=#f00 style="font-size:1.3em">字</font>**了
  
網站 1 : https://www.copypastecharacter.com/emojis
  
網站 2 : https://tw.piliapp.com/symbol/
  
網站 3 : https://www.toptal.com/designers/htmlarrows/currency/

以下轉貼自[網站1](https://www.copypastecharacter.com/emojis)  
  
<div style="font-size:2em">
🎳 🏂 🌁 🌉 🌋 🌌 🌏 🌑 🌓 🌔 🌕 🌛 🌠 🌰 🍏 🌱 🌼 🌽 🌿 🍄 🍇 🍈 🍌 🍍 🍑 🍒 🍩 🍕 🍖 🍗 🍠 🍤 🍥 🍨 🍪 🍫 🍬 🍭 🍮 🍯 🍷 🍹 🎊 🎋 🎠 🎣 🎭 🎮 🎲 🎴 🎹 🎻 🎼 🎽 🏡 🏮 🐌 🐜 🐝 🐞 🐡 🐢 🐣 🐥 🐩 🐼 🐽 🐾 👅 👓 👖 👚 👛 👝 👤 👪 👰 👹 👺 💌 💕 💖 💞 💠 💥 💧 💫 💬 💮 💯 💲 💳 💴 💵 💸 💾 📁 📂 📃 📄 📅 📆 📇 📈 📉 📊 📋 📌 📍 📎 📏 📐 📑 📒 📓 📔 📕 📙 📚 📛 📜 📞 📟 📤 📥 📦 📧 📨 📪 📰 📹 🔃 🔋 🔌 🔎 🔏 🔐 🔖 🔗 🔘 🔙 🔚 🔛 🔜 🔟 🔠 🔡 🔢 🔣 🔤 🔦 🔧 🔩 🔪 🔮 🔵 🔶 🔷 🔸 🔹 🔼 🔽 😄 😊 😃 😉 😍 😘 😚 😳 😌 😁 😜 😝 😒 😏 😓 😔 😞 😱 😠 😡 😪 😷 👿 👽 💛 💙 💜 💗 💚 💔 💓 💘 🌟 💢 💤 💨 💦 🎶 🎵 🔥 💩 👍 👎 👌 👊 👋 👐 👆 👇 👉 👈 🙌 🙏 👏 💪 🚶 🏃 👫 💃 👯 🙆 🙅 💁 🙇 💏 💑 💆 💇 💅 👦 👧 👩 👨 👶 👵 👴 👱 👲 👳 👷 👮 👼 👸 💂 💀 👣 💋 👄 👂 👀 👃 ⛄ 🌙 🌀 🌊 🐱 🐶 🐭 🐹 🐰 🐺 🐸 🐯 🐨 🐻 🐷 🐮 🐗 🐵 🐒 🐴 🐎 🐫 🐑 🐘 🐍 🐦 🐤 🐔 🐧 🐛 🐙 🐠 🐟 🐳 🐬 💐 🌸 🌹 🌻 🌺 🍁 🍃 🍂 🌴 🌵 🌾 🐚 🎍 💝 🎎 🎒 🎓 🎏 🎆 🎇 🎐 🎑 🎃 👻 🎅 🎄 🎁 🔔 🎉 🎈 💿 📀 📷 🎥 💻 📺 📱 📠 💽 📼 🔊 📢 📣 📻 📡 🔍 🔓 🔒 🔑 🔨 💡 📲 📩 📫 📮 🛀 🚽 💺 💰 🔱 🚬 💣 🔫 💊 💉 🏈 🏀 ⚽ ⚾ 🎾 ⛳ 🎱 🏊 🏄 🎿 🏆 👾 🎷 🎸 👟 👡 👠 👢 👕 👔 👜 💄 💍 💎 🍵 🍺 🍻 🍸 🍶 🍴 🍔 🍟 🍝 🍛 🍱 🍣 🍙 🍘 🍚 🍜 🍲 🍞 🍳 🍢 🍡 🍦 🍧 🎂 🍰 🍎 🍊 🍉 🍓 🍆 🍅 🏠 🏫 🏢 🏣 🏥 🏦 🏪 🏩 🏨 💒 ⛪ 🏬 🌇 🌆 🏯 🏰 ⛺ 🏭 🗼 🗻 🌄 🌅 🌃 🗽 🌈 🎡 ⛲ 🎢 🚢 🚤 ⛵ 🚀 🚲 🚙 🚗 🚕 🚌 🚓 🚒 🚑 🚚 🚃 🚉 🚄 🚅 🎫 ⛽ 🚥 🚧 🔰 🏧 🎰 🚏 💈 🏁 🎌 🎯 🀄 🎬 📝 📖 🎨 🎤 🎧 🎺 👗 👘 👙 🎀 🎩 👑 👒 🌂 💼  
  
</div>

以下轉貼自[網站2](https://tw.piliapp.com/symbol/)    
  
<div style="font-size:2em">
𓀞 𓀟 𓀠 𓀡 𓀢 𓀣 𓀤 𓀥 𓀦 𓀧 𓀨 𓀩 𓀪 𓀫 𓀬 𓀀 𓀁 𓀂 𓀃 𓀄 𓀅 𓀆 𓀇 𓀈 𓀉 𓀊 𓀋 𓀌 𓀍 𓀎 𓀏 𓀐 𓀑 𓀒 𓀓 𓀔 𓀕 𓀖 𓀗 𓀘 𓀙 𓀚 𓀛 𓀜 𓀝 𓁁 𓁂 𓁃 𓁄 𓁅
𓁆 𓁇 𓁈 𓁉 𓁊 𓁋 𓁌 𓁍 𓁎 𓁏 𓁐 𓁑 𓁒 𓁓 𓁔 𓁕 𓁖 𓁗 𓁘 𓁙
𓀭 𓀮 𓀯 𓀰 𓀱 𓀲 𓀳 𓀴 𓀵 𓀶 𓀷 𓀸 𓀹 𓀺 𓀻 𓀼 𓀽 𓀾 𓀿 𓁀 𓁲 𓁚 𓁛 𓁜 𓁝 𓁞 𓁟 𓁠 𓁡 𓁢 𓁣 𓁤 𓁥 𓁦 𓁧 𓁨 𓁩 𓁪 𓁫 𓁬 𓁭 𓁮 𓁯 𓁰 𓁱 𓁳 𓁴 𓁵  
<br><br>  
𓃥 𓃠 𓃰 𓃱 𓃯 𓃭 𓃸 𓃵 𓃗 𓃘 𓃙 𓃟 𓄀 𓄁 𓄂 𓄃 𓃚 𓃛 𓃜 𓃝 𓃞 𓃒 𓃓 𓃔 𓃕 𓃖 𓃡 𓃢 𓃦 𓃩 𓃫 𓃬 𓃮 𓃲 𓃴 𓃶 𓃷 𓃹 𓃻 𓃽 𓃾 𓃿 𓄄 𓄅 𓄆 𓄇
𓆇 𓆈 𓆉 𓆌 𓆏 𓆗 𓆘 𓆙 𓆚 𓆐 𓆑 𓆒 𓆓 𓆔 𓆕 𓆖 𓆊 𓆍
𓆣 𓆤 𓆥 𓆦 𓆧 𓆨 𓆛 𓆜 𓆝 𓆞 𓆟 𓆠 𓆡 𓆢
𓄿 𓅀 𓅁 𓅂 𓅃 𓅄 𓅅 𓅆 𓅇 𓅈 𓅉 𓅊 𓅋 𓅌 𓅍 𓅎 𓅏 𓅐 𓅑 𓅒 𓅓 𓅔 𓅕 𓅖 𓅗 𓅘 𓅙 𓅚 𓅛 𓅜 𓅝 𓅞 𓅟 𓅠 𓅡 𓅢 𓅣 𓅤 𓅥 𓅦 𓅧 𓅨 𓅩 𓅪 𓅫 𓅬 𓅭 𓅮 𓅯 𓅰 𓅱 𓅲 𓅳 𓅴 𓅵 𓅶 𓅷 𓅸 𓅹 𓅺 𓅻 𓅼 𓅽 𓅾 𓅿 𓆀 𓆁 𓆂 𓆃 𓆆  
<br><br>
😀 😃 😄 😁 😆 😅 😂 🤣 😇 😉 😊 🙂 🙃 ☺ 😋 😌 😍 🥰 😘 😗 😙 😚 🤪 😜 😝 😛 🤑 😎 🤓 🧐 🤠 🥳 🤗 🤡 😏 😶 😐 😑 😒 🙄 🤨 🤔 🤫 🤭 🤥 😳 😞 😟 😠 😡 🤬 😔 😕 🙁 ☹ 😬 🥺 😣 😖 😫 😩 🥱 😤 😮 😱 😨 😰 😯 😦 😧 😢 😥 😪 🤤 😓 😭 🤩 😵 🥴 😲 🤯 🤐 😷 🤕 🤒 🤮 🤢 🤧 🥵 🥶 😴 💤 😈 👿 👹 👺 💩 👻 💀 ☠ 👽 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🤲 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌ 🤘 🤟 👌 🤏 👈 👉 👆 👇 ☝ ✋ 🤚 🖐 🖖 👋 🤙 💪 🦾 🖕 ✍ 🤳 💅 🦵 🦿 🦶 👄 🦷 👅 👂 🦻 👃 👁 👀 🧠 🦴 👤 👥 🗣 👶 👧 🧒 👦 👩 🧑 👨 👩‍🦱 🧑‍🦱 👨‍🦱 👩‍🦰 🧑‍🦰 👨‍🦰 👱‍♀️ 👱 👱‍♂️ 👩‍🦳 🧑‍🦳 👨‍🦳 👩‍🦲 🧑‍🦲 👨‍🦲 🧔 👵 🧓 👴 👲 👳‍♀️ 👳 👳‍♂️ 🧕 👼 👸 🤴 👰 🤵‍♀️ 🤵 🤵‍♂️ 🙇‍♀️ 🙇 🙇‍♂️ 💁‍♀️ 💁 💁‍♂️ 🙅‍♀️ 🙅 🙅‍♂️ 🙆‍♀️ 🙆 🙆‍♂️ 🤷‍♀️ 🤷 🤷‍♂️ 🙋‍♀️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦 🤦‍♂️ 🧏‍♀️ 🧏 🧏‍♂️ 🙎‍♀️ 🙎 🙎‍♂️ 🙍‍♀️ 🙍 🙍‍♂️ 💇‍♀️ 💇 💇‍♂️ 💆‍♀️ 💆 💆‍♂️ 🤰 🤱 🧎‍♀️ 🧎 🧎‍♂️ 🧍‍♀️ 🧍 🧍‍♂️ 🚶‍♀️ 🚶 🚶‍♂️ 👩‍🦯 🧑‍🦯 👨‍🦯 🏃‍♀️ 🏃 🏃‍♂️ 👩‍🦼 🧑‍🦼 👨‍🦼 👩‍🦽 🧑‍🦽 👨‍🦽 💃 🕺 👫 👭 👬 🧑‍🤝‍🧑 👩‍❤️‍👨 👩‍❤️‍👩 💑 👨‍❤️‍👨 👩‍❤️‍💋‍👨 👩‍❤️‍💋‍👩 💏 👨‍❤️‍💋‍👨 ❤ 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💔 ❣ 💕 💞 💓 💗 💖 💘 💝 💟  
<br><br>  
🐶 🐱 🐭 🐹 🐰 🐻 🧸 🐼 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🦍 🦧 🐔 🐧 🐦 🐤 🐣 🐥 🐺 🦊 🦝 🐗 🐴 🦓 🦒 🦌 🦘 🦥 🦦 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🦗 🕷 🕸 🦂 🦟 🦠 🐢 🐍 🦎 🐙 🦑 🦞 🦀 🦐 🦪 🐠 🐟 🐡 🐬 🦈 🐳 🐋 🐊 🐆 🐅 🐃 🐂 🐄 🐪 🐫 🦙 🐘 🦏 🦛 🐐 🐏 🐑 🐎 🐖 🦇 🐓 🦃 🕊 🦅 🦆 🦢 🦉 🦩 🦚 🦜 🐕 🦮 🐕‍🦺 🐩 🐈 🐇 🐀 🐁 🐿 🦨 🦡 🦔 🐾 🐉 🐲 🦕 🦖 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘ 🍀 🎍 🎋 🍃 🍂 🍁 🌾 🌺 🌻 🌹 🥀 🌷 🌼 🌸 💐 🍄 🌰 🐚 🌎 🌍 🌏 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌚 🌝 🌛 🌜 ⭐ 🌟 💫 ✨ ☄ 🪐 🌞 ☀ 🌤 ⛅ 🌥 🌦 ☁ 🌧 ⛈ 🌩 ⚡ 🔥 💥 ❄ 🌨 ☃ ⛄ 🌬 💨 🌪 🌫 🌈 ☔ 💧 💦 🌊  
<br><br>
🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🥑 🍆 🌶 🥒 🥬 🥦 🧄 🧅 🌽 🥕 🥗 🥔 🍠 🥜 🍯 🍞 🥐 🥖 🥨 🥯 🥞 🧇 🧀 🍗 🍖 🥩 🍤 🥚 🍳 🥓 🍔 🍟 🌭 🍕 🍝 🥪 🌮 🌯 🥙 🧆 🍜 🥘 🍲 🥫 🧂 🧈 🍥 🍣 🍱 🍛 🍙 🍚 🍘 🥟 🍢 🍡 🍧 🍨 🍦 🍰 🎂 🧁 🥧 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🥠 🥮 ☕ 🍵 🥣 🍼 🥤 🧃 🧉 🥛 🍺 🍻 🍷 🥂 🥃 🍸 🍹 🍾 🍶 🧊 🥄 🍴 🍽 🥢 🥡  
<br><br>  
⚽ 🏀 🏈 ⚾ 🥎 🎾 🏐 🏉 🎱 🥏 🏓 🏸 🥅 🏒 🏑 🏏 🥍 🥌 ⛳ 🏹 🎣 🤿 🥊 🥋 ⛸ 🎿 🛷 ⛷ 🏂 🏋️‍♀️ 🏋 🏋️‍♂️ 🤺 🤼‍♀️ 🤼 🤼‍♂️ 🤸‍♀️ 🤸 🤸‍♂️ ⛹️‍♀️ ⛹ ⛹️‍♂️ 🤾‍♀️ 🤾 🤾‍♂️ 🧗‍♀️ 🧗 🧗‍♂️ 🏌️‍♀️ 🏌 🏌️‍♂️ 🧘‍♀️ 🧘 🧘‍♂️ 🧖‍♀️ 🧖 🧖‍♂️ 🏄‍♀️ 🏄 🏄‍♂️ 🏊‍♀️ 🏊 🏊‍♂️ 🤽‍♀️ 🤽 🤽‍♂️ 🚣‍♀️ 🚣 🚣‍♂️ 🏇 🚴‍♀️ 🚴 🚴‍♂️ 🚵‍♀️ 🚵 🚵‍♂️ 🎽 🎖 🏅 🥇 🥈 🥉 🏆 🏵 🎗 🎫 🎟 🎪 🤹‍♀️ 🤹 🤹‍♂️ 🎭 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🎷 🎺 🎸 🪕 🎻 🎲 🧩 ♟ 🎯 🎳 🪀 🪁 🎮 👾 🎰 👮‍♀️ 👮 👮‍♂️ 👩‍🚒 🧑‍🚒 👨‍🚒 👷‍♀️ 👷 👷‍♂️ 👩‍🏭 🧑‍🏭 👨‍🏭 👩‍🔧 🧑‍🔧 👨‍🔧 👩‍🌾 🧑‍🌾 👨‍🌾 👩‍🍳 🧑‍🍳 👨‍🍳 👩‍🎤 🧑‍🎤 👨‍🎤 👩‍🎨 🧑‍🎨 👨‍🎨 👩‍🏫 🧑‍🏫 👨‍🏫 👩‍🎓 🧑‍🎓 👨‍🎓 👩‍💼 🧑‍💼 👨‍💼 👩‍💻 🧑‍💻 👨‍💻 👩‍🔬 🧑‍🔬 👨‍🔬 👩‍🚀 🧑‍🚀 👨‍🚀 👩‍⚕️ 🧑‍⚕️ 👨‍⚕️ 👩‍⚖️ 🧑‍⚖️ 👨‍⚖️ 👩‍✈️ 🧑‍✈️ 👨‍✈️ 💂‍♀️ 💂 💂‍♂️ 🕵️‍♀️ 🕵 🕵️‍♂️ 🤶 🎅 🕴️‍♀️ 🕴 🕴️‍♂️ 🦸‍♀️ 🦸 🦸‍♂️ 🦹‍♀️ 🦹 🦹‍♂️ 🧙‍♀️ 🧙 🧙‍♂️ 🧝‍♀️ 🧝 🧝‍♂️ 🧚‍♀️ 🧚 🧚‍♂️ 🧞‍♀️ 🧞 🧞‍♂️ 🧜‍♀️ 🧜 🧜‍♂️ 🧛‍♀️ 🧛 🧛‍♂️ 🧟‍♀️ 🧟 🧟‍♂️ 👯‍♀️ 👯 👯‍♂️ 👪 👨‍👩‍👧 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧  
<br><br>
🚗 🚙 🚕 🛺 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🚚 🚛 🚜 🏍 🛵 🚲 🦼 🦽 🛴 🛹 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚝 🚄 🚅 🚈 🚞 🚂 🚆 🚇 🚊 🚉 🚁 🛩 ✈ 🛫 🛬 🪂 💺 🛰 🚀 🛸 🛶 ⛵ 🛥 🚤 ⛴ 🛳 🚢 ⚓ ⛽ 🚧 🚏 🚦 🚥 🛑 🎡 🎢 🎠 🏗 🌁 🗼 🏭 ⛲ 🎑 ⛰ 🏔 🗻 🌋 🗾 🏕 ⛺ 🏞 🛣 🛤 🌅 🌄 🏜 🏖 🏝 🌇 🌆 🏙 🌃 🌉 🌌 🌠 🎇 🎆 🏘 🏰 🏯 🏟 🗽 🏠 🏡 🏚 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪ 🕌 🛕 🕍 🕋 ⛩  
<br><br>
⌚ 📱 📲 💻 ⌨ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎ 📟 📠 📺 📻 🎙 🎚 🎛 ⏱ ⏲ ⏰ 🕰 ⏳ ⌛ 🧮 📡 🔋 🔌 💡 🔦 🕯 🧯 🗑 🛢 🛒 💸 💵 💴 💶 💷 💰 💳 🧾 💎 ⚖ 🦯 🧰 🔧 🔨 ⚒ 🛠 ⛏ 🪓 🔩 ⚙ ⛓ 🧱 🔫 🧨 💣 🔪 🗡 ⚔ 🛡 🚬 ⚰ ⚱ 🏺 🔮 📿 🧿 💈 🧲 ⚗ 🧪 🧫 🧬 🔭 🔬 🕳 💊 💉 🩸 🩹 🩺 🌡 🏷 🔖 🚽 🚿 🛁 🛀 🪒 🧴 🧻 🧼 🧽 🧹 🧺 🔑 🗝 🛋 🪑 🛌 🛏 🚪 🧳 🛎 🖼 🧭 🗺 ⛱ 🗿 🛍 🎈 🎏 🎀 🧧 🎁 🎊 🎉 🎎 🎐 🏮 🪔 ✉ 📩 📨 📧 💌 📮 📪 📫 📬 📭 📦 📯 📥 📤 📜 📃 📑 📊 📈 📉 📄 📅 📆 🗓 📇 🗃 🗳 🗄 📋 🗒 📁 📂 🗂 🗞 📰 📓 📕 📗 📘 📙 📔 📒 📚 📖 🔗 📎 🖇 ✂ 📐 📏 📌 📍 🧷 🧵 🧶 🔐 🔒 🔓 🔏 🖊 🖋 ✒ 📝 ✏ 🖍 🖌 🔍 🔎 👚 👕 🥼 🦺 🧥 👖 👔 👗 👘 🥻 🩱 👙 🩲 🩳 💄 💋 👣 🧦 👠 👡 👢 🥿 👞 👟 🩰 🥾 🧢 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓 🕶 🥽 🧣 🧤 💍 🌂 ☂  
<br><br>  
☮ ✝ ☪ 🕉 ☸ ✡ 🔯 🕎 ☯ ☦ 🛐 ⛎ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ 🆔 ⚛ ⚕ ☢ ☣ 📴 📳 🈶 🈚 🈸 🈺 🈷 ✴ 🆚 🉑 💮 🉐 ㊙ ㊗ 🈴 🈵 🈹 🈲 🅰 🅱 🆎 🆑 🅾 🆘 ⛔ 📛 🚫 ❌ ⭕ 💢 ♨ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗ ❕ ❓ ❔ ‼ ⁉ 💯 🔅 🔆 🔱 ⚜ 〽 ⚠ 🚸 🔰 ♻ 🈯 💹 ❇ ✳ ❎ ✅ 💠 🌀 ➿ 🌐 ♾ Ⓜ 🏧 🚾 ♿ 🅿 🈳 🈂 🛂 🛃 🛄 🛅 🚰 🚹 ♂ 🚺 ♀ ⚧ 🚼 🚻 🚮 🎦 📶 🈁 🆖 🆗 🆙 🆒 🆕 🆓 0⃣ 1⃣ 2⃣ 3⃣ 4⃣ 5⃣ 6⃣ 7⃣ 8⃣ 9⃣ 🔟 🔢 ▶ ⏸ ⏯ ⏹ ⏺ ⏏ ⏭ ⏮ ⏩ ⏪ 🔀 🔁 🔂 ◀ 🔼 🔽 ⏫ ⏬ ➡ ⬅ ⬆ ⬇ ↗ ↘ ↙ ↖ ↕ ↔ 🔄 ↪ ↩ 🔃 ⤴ ⤵ #⃣ *⃣ ℹ 🔤 🔡 🔠 🔣 🎵 🎶 〰 ➰ ✔ ➕ ➖ ➗ ✖ 💲 💱 © ® ™ 🔚 🔙 🔛 🔝 🔜 ☑ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ ◼ ◻ ◾ ◽ ▪ ▫ 🔸 🔹 🔶 🔷 🔺 🔻 🔲 🔳 🔈 🔉 🔊 🔇 📣 📢 🔔 🔕 🃏 🀄 ♠ ♣ ♥ ♦ 🎴 👁‍🗨 🗨 💭 🗯 💬 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧  
<br><br>
🏳 🏴 🏁 🚩 🎌 🏴‍☠️ 🏳️‍🌈 🏳️‍⚧️ 🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇨 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇫🇷 🇬🇦 🇬🇧 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇳 🇭🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇮🇹 🇯🇪 🇯🇲 🇯🇴 🇯🇵 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇷 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴 🇳🇵 🇳🇷 🇳🇺 🇳🇿 🇴🇲 🇵🇦 🇵🇪 🇵🇫 🇵🇬 🇵🇭 🇵🇰 🇵🇱 🇵🇲 🇵🇳 🇵🇷 🇵🇸 🇵🇹 🇵🇼 🇵🇾 🇶🇦 🇷🇪 🇷🇴 🇷🇸 🇷🇺 🇷🇼 🇸🇦 🏴󠁧󠁢󠁳󠁣󠁴󠁿 🇸🇧 🇸🇨 🇸🇩 🇸🇪 🇸🇬 🇸🇭 🇸🇮 🇸🇰 🇸🇱 🇸🇲 🇸🇳 🇸🇴 🇸🇷 🇸🇸 🇸🇹 🇸🇻 🇸🇽 🇸🇾 🇸🇿 🇹🇦 🇹🇨 🇹🇩 🇹🇫 🇹🇬 🇹🇭 🇹🇯 🇹🇰 🇹🇱 🇹🇲 🇹🇳 🇹🇴 🇹🇷 🇹🇹 🇹🇻 🇹🇼 🇹🇿 🇺🇦 🇺🇬 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇦 🇻🇨 🇻🇪 🇻🇬 🇻🇮 🇻🇳 🇻🇺 🏴󠁧󠁢󠁷󠁬󠁳󠁿 🇼🇫 🇼🇸 🇽🇰 🇾🇪 🇾🇹 🇿🇦 🇿🇲 🇿🇼  
</div>

無意間看到這幾個網站，很驚訝原來系統中本來就有這些字了

網站 1 : https://www.copypastecharacter.com/emojis

網站 2 : https://tw.piliapp.com/symbol/

網站 3 : https://www.toptal.com/designers/htmlarrows/currency/

以下轉貼自網站1

🎳 🏂 🌁 🌉 🌋 🌌 🌏 🌑 🌓 🌔 🌕 🌛 🌠 🌰 🍏 🌱 🌼 🌽 🌿 🍄 🍇 🍈 🍌 🍍 🍑 🍒 🍩 🍕 🍖 🍗 🍠 🍤 🍥 🍨 🍪 🍫 🍬 🍭 🍮 🍯 🍷 🍹 🎊 🎋 🎠 🎣 🎭 🎮 🎲 🎴 🎹 🎻 🎼 🎽 🏡 🏮 🐌 🐜 🐝 🐞 🐡 🐢 🐣 🐥 🐩 🐼 🐽 🐾 👅 👓 👖 👚 👛 👝 👤 👪 👰 👹 👺 💌 💕 💖 💞 💠 💥 💧 💫 💬 💮 💯 💲 💳 💴 💵 💸 💾 📁 📂 📃 📄 📅 📆 📇 📈 📉 📊 📋 📌 📍 📎 📏 📐 📑 📒 📓 📔 📕 📙 📚 📛 📜 📞 📟 📤 📥 📦 📧 📨 📪 📰 📹 🔃 🔋 🔌 🔎 🔏 🔐 🔖 🔗 🔘 🔙 🔚 🔛 🔜 🔟 🔠 🔡 🔢 🔣 🔤 🔦 🔧 🔩 🔪 🔮 🔵 🔶 🔷 🔸 🔹 🔼 🔽 😄 😊 😃 😉 😍 😘 😚 😳 😌 😁 😜 😝 😒 😏 😓 😔 😞 😱 😠 😡 😪 😷 👿 👽 💛 💙 💜 💗 💚 💔 💓 💘 🌟 💢 💤 💨 💦 🎶 🎵 🔥 💩 👍 👎 👌 👊 👋 👐 👆 👇 👉 👈 🙌 🙏 👏 💪 🚶 🏃 👫 💃 👯 🙆 🙅 💁 🙇 💏 💑 💆 💇 💅 👦 👧 👩 👨 👶 👵 👴 👱 👲 👳 👷 👮 👼 👸 💂 💀 👣 💋 👄 👂 👀 👃 ⛄ 🌙 🌀 🌊 🐱 🐶 🐭 🐹 🐰 🐺 🐸 🐯 🐨 🐻 🐷 🐮 🐗 🐵 🐒 🐴 🐎 🐫 🐑 🐘 🐍 🐦 🐤 🐔 🐧 🐛 🐙 🐠 🐟 🐳 🐬 💐 🌸 🌹 🌻 🌺 🍁 🍃 🍂 🌴 🌵 🌾 🐚 🎍 💝 🎎 🎒 🎓 🎏 🎆 🎇 🎐 🎑 🎃 👻 🎅 🎄 🎁 🔔 🎉 🎈 💿 📀 📷 🎥 💻 📺 📱 📠 💽 📼 🔊 📢 📣 📻 📡 🔍 🔓 🔒 🔑 🔨 💡 📲 📩 📫 📮 🛀 🚽 💺 💰 🔱 🚬 💣 🔫 💊 💉 🏈 🏀 ⚽ ⚾ 🎾 ⛳ 🎱 🏊 🏄 🎿 🏆 👾 🎷 🎸 👟 👡 👠 👢 👕 👔 👜 💄 💍 💎 🍵 🍺 🍻 🍸 🍶 🍴 🍔 🍟 🍝 🍛 🍱 🍣 🍙 🍘 🍚 🍜 🍲 🍞 🍳 🍢 🍡 🍦 🍧 🎂 🍰 🍎 🍊 🍉 🍓 🍆 🍅 🏠 🏫 🏢 🏣 🏥 🏦 🏪 🏩 🏨 💒 ⛪ 🏬 🌇 🌆 🏯 🏰 ⛺ 🏭 🗼 🗻 🌄 🌅 🌃 🗽 🌈 🎡 ⛲ 🎢 🚢 🚤 ⛵ 🚀 🚲 🚙 🚗 🚕 🚌 🚓 🚒 🚑 🚚 🚃 🚉 🚄 🚅 🎫 ⛽ 🚥 🚧 🔰 🏧 🎰 🚏 💈 🏁 🎌 🎯 🀄 🎬 📝 📖 🎨 🎤 🎧 🎺 👗 👘 👙 🎀 🎩 👑 👒 🌂 💼

以下轉貼自網站2

𓀞 𓀟 𓀠 𓀡 𓀢 𓀣 𓀤 𓀥 𓀦 𓀧 𓀨 𓀩 𓀪 𓀫 𓀬 𓀀 𓀁 𓀂 𓀃 𓀄 𓀅 𓀆 𓀇 𓀈 𓀉 𓀊 𓀋 𓀌 𓀍 𓀎 𓀏 𓀐 𓀑 𓀒 𓀓 𓀔 𓀕 𓀖 𓀗 𓀘 𓀙 𓀚 𓀛 𓀜 𓀝 𓁁 𓁂 𓁃 𓁄 𓁅 𓁆 𓁇 𓁈 𓁉 𓁊 𓁋 𓁌 𓁍 𓁎 𓁏 𓁐 𓁑 𓁒 𓁓 𓁔 𓁕 𓁖 𓁗 𓁘 𓁙 𓀭 𓀮 𓀯 𓀰 𓀱 𓀲 𓀳 𓀴 𓀵 𓀶 𓀷 𓀸 𓀹 𓀺 𓀻 𓀼 𓀽 𓀾 𓀿 𓁀 𓁲 𓁚 𓁛 𓁜 𓁝 𓁞 𓁟 𓁠 𓁡 𓁢 𓁣 𓁤 𓁥 𓁦 𓁧 𓁨 𓁩 𓁪 𓁫 𓁬 𓁭 𓁮 𓁯 𓁰 𓁱 𓁳 𓁴 𓁵

𓃥 𓃠 𓃰 𓃱 𓃯 𓃭 𓃸 𓃵 𓃗 𓃘 𓃙 𓃟 𓄀 𓄁 𓄂 𓄃 𓃚 𓃛 𓃜 𓃝 𓃞 𓃒 𓃓 𓃔 𓃕 𓃖 𓃡 𓃢 𓃦 𓃩 𓃫 𓃬 𓃮 𓃲 𓃴 𓃶 𓃷 𓃹 𓃻 𓃽 𓃾 𓃿 𓄄 𓄅 𓄆 𓄇 𓆇 𓆈 𓆉 𓆌 𓆏 𓆗 𓆘 𓆙 𓆚 𓆐 𓆑 𓆒 𓆓 𓆔 𓆕 𓆖 𓆊 𓆍 𓆣 𓆤 𓆥 𓆦 𓆧 𓆨 𓆛 𓆜 𓆝 𓆞 𓆟 𓆠 𓆡 𓆢 𓄿 𓅀 𓅁 𓅂 𓅃 𓅄 𓅅 𓅆 𓅇 𓅈 𓅉 𓅊 𓅋 𓅌 𓅍 𓅎 𓅏 𓅐 𓅑 𓅒 𓅓 𓅔 𓅕 𓅖 𓅗 𓅘 𓅙 𓅚 𓅛 𓅜 𓅝 𓅞 𓅟 𓅠 𓅡 𓅢 𓅣 𓅤 𓅥 𓅦 𓅧 𓅨 𓅩 𓅪 𓅫 𓅬 𓅭 𓅮 𓅯 𓅰 𓅱 𓅲 𓅳 𓅴 𓅵 𓅶 𓅷 𓅸 𓅹 𓅺 𓅻 𓅼 𓅽 𓅾 𓅿 𓆀 𓆁 𓆂 𓆃 𓆆

😀 😃 😄 😁 😆 😅 😂 🤣 😇 😉 😊 🙂 🙃 ☺ 😋 😌 😍 🥰 😘 😗 😙 😚 🤪 😜 😝 😛 🤑 😎 🤓 🧐 🤠 🥳 🤗 🤡 😏 😶 😐 😑 😒 🙄 🤨 🤔 🤫 🤭 🤥 😳 😞 😟 😠 😡 🤬 😔 😕 🙁 ☹ 😬 🥺 😣 😖 😫 😩 🥱 😤 😮 😱 😨 😰 😯 😦 😧 😢 😥 😪 🤤 😓 😭 🤩 😵 🥴 😲 🤯 🤐 😷 🤕 🤒 🤮 🤢 🤧 🥵 🥶 😴 💤 😈 👿 👹 👺 💩 👻 💀 ☠ 👽 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🤲 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌ 🤘 🤟 👌 🤏 👈 👉 👆 👇 ☝ ✋ 🤚 🖐 🖖 👋 🤙 💪 🦾 🖕 ✍ 🤳 💅 🦵 🦿 🦶 👄 🦷 👅 👂 🦻 👃 👁 👀 🧠 🦴 👤 👥 🗣 👶 👧 🧒 👦 👩 🧑 👨 👩‍🦱 🧑‍🦱 👨‍🦱 👩‍🦰 🧑‍🦰 👨‍🦰 👱‍♀️ 👱 👱‍♂️ 👩‍🦳 🧑‍🦳 👨‍🦳 👩‍🦲 🧑‍🦲 👨‍🦲 🧔 👵 🧓 👴 👲 👳‍♀️ 👳 👳‍♂️ 🧕 👼 👸 🤴 👰 🤵‍♀️ 🤵 🤵‍♂️ 🙇‍♀️ 🙇 🙇‍♂️ 💁‍♀️ 💁 💁‍♂️ 🙅‍♀️ 🙅 🙅‍♂️ 🙆‍♀️ 🙆 🙆‍♂️ 🤷‍♀️ 🤷 🤷‍♂️ 🙋‍♀️ 🙋 🙋‍♂️ 🤦‍♀️ 🤦 🤦‍♂️ 🧏‍♀️ 🧏 🧏‍♂️ 🙎‍♀️ 🙎 🙎‍♂️ 🙍‍♀️ 🙍 🙍‍♂️ 💇‍♀️ 💇 💇‍♂️ 💆‍♀️ 💆 💆‍♂️ 🤰 🤱 🧎‍♀️ 🧎 🧎‍♂️ 🧍‍♀️ 🧍 🧍‍♂️ 🚶‍♀️ 🚶 🚶‍♂️ 👩‍🦯 🧑‍🦯 👨‍🦯 🏃‍♀️ 🏃 🏃‍♂️ 👩‍🦼 🧑‍🦼 👨‍🦼 👩‍🦽 🧑‍🦽 👨‍🦽 💃 🕺 👫 👭 👬 🧑‍🤝‍🧑 👩‍❤️‍👨 👩‍❤️‍👩 💑 👨‍❤️‍👨 👩‍❤️‍💋‍👨 👩‍❤️‍💋‍👩 💏 👨‍❤️‍💋‍👨 ❤ 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💔 ❣ 💕 💞 💓 💗 💖 💘 💝 💟

🐶 🐱 🐭 🐹 🐰 🐻 🧸 🐼 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🦍 🦧 🐔 🐧 🐦 🐤 🐣 🐥 🐺 🦊 🦝 🐗 🐴 🦓 🦒 🦌 🦘 🦥 🦦 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🦗 🕷 🕸 🦂 🦟 🦠 🐢 🐍 🦎 🐙 🦑 🦞 🦀 🦐 🦪 🐠 🐟 🐡 🐬 🦈 🐳 🐋 🐊 🐆 🐅 🐃 🐂 🐄 🐪 🐫 🦙 🐘 🦏 🦛 🐐 🐏 🐑 🐎 🐖 🦇 🐓 🦃 🕊 🦅 🦆 🦢 🦉 🦩 🦚 🦜 🐕 🦮 🐕‍🦺 🐩 🐈 🐇 🐀 🐁 🐿 🦨 🦡 🦔 🐾 🐉 🐲 🦕 🦖 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘ 🍀 🎍 🎋 🍃 🍂 🍁 🌾 🌺 🌻 🌹 🥀 🌷 🌼 🌸 💐 🍄 🌰 🐚 🌎 🌍 🌏 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌚 🌝 🌛 🌜 ⭐ 🌟 💫 ✨ ☄ 🪐 🌞 ☀ 🌤 ⛅ 🌥 🌦 ☁ 🌧 ⛈ 🌩 ⚡ 🔥 💥 ❄ 🌨 ☃ ⛄ 🌬 💨 🌪 🌫 🌈 ☔ 💧 💦 🌊

🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🥑 🍆 🌶 🥒 🥬 🥦 🧄 🧅 🌽 🥕 🥗 🥔 🍠 🥜 🍯 🍞 🥐 🥖 🥨 🥯 🥞 🧇 🧀 🍗 🍖 🥩 🍤 🥚 🍳 🥓 🍔 🍟 🌭 🍕 🍝 🥪 🌮 🌯 🥙 🧆 🍜 🥘 🍲 🥫 🧂 🧈 🍥 🍣 🍱 🍛 🍙 🍚 🍘 🥟 🍢 🍡 🍧 🍨 🍦 🍰 🎂 🧁 🥧 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🥠 🥮 ☕ 🍵 🥣 🍼 🥤 🧃 🧉 🥛 🍺 🍻 🍷 🥂 🥃 🍸 🍹 🍾 🍶 🧊 🥄 🍴 🍽 🥢 🥡

⚽ 🏀 🏈 ⚾ 🥎 🎾 🏐 🏉 🎱 🥏 🏓 🏸 🥅 🏒 🏑 🏏 🥍 🥌 ⛳ 🏹 🎣 🤿 🥊 🥋 ⛸ 🎿 🛷 ⛷ 🏂 🏋️‍♀️ 🏋 🏋️‍♂️ 🤺 🤼‍♀️ 🤼 🤼‍♂️ 🤸‍♀️ 🤸 🤸‍♂️ ⛹️‍♀️ ⛹ ⛹️‍♂️ 🤾‍♀️ 🤾 🤾‍♂️ 🧗‍♀️ 🧗 🧗‍♂️ 🏌️‍♀️ 🏌 🏌️‍♂️ 🧘‍♀️ 🧘 🧘‍♂️ 🧖‍♀️ 🧖 🧖‍♂️ 🏄‍♀️ 🏄 🏄‍♂️ 🏊‍♀️ 🏊 🏊‍♂️ 🤽‍♀️ 🤽 🤽‍♂️ 🚣‍♀️ 🚣 🚣‍♂️ 🏇 🚴‍♀️ 🚴 🚴‍♂️ 🚵‍♀️ 🚵 🚵‍♂️ 🎽 🎖 🏅 🥇 🥈 🥉 🏆 🏵 🎗 🎫 🎟 🎪 🤹‍♀️ 🤹 🤹‍♂️ 🎭 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🎷 🎺 🎸 🪕 🎻 🎲 🧩 ♟ 🎯 🎳 🪀 🪁 🎮 👾 🎰 👮‍♀️ 👮 👮‍♂️ 👩‍🚒 🧑‍🚒 👨‍🚒 👷‍♀️ 👷 👷‍♂️ 👩‍🏭 🧑‍🏭 👨‍🏭 👩‍🔧 🧑‍🔧 👨‍🔧 👩‍🌾 🧑‍🌾 👨‍🌾 👩‍🍳 🧑‍🍳 👨‍🍳 👩‍🎤 🧑‍🎤 👨‍🎤 👩‍🎨 🧑‍🎨 👨‍🎨 👩‍🏫 🧑‍🏫 👨‍🏫 👩‍🎓 🧑‍🎓 👨‍🎓 👩‍💼 🧑‍💼 👨‍💼 👩‍💻 🧑‍💻 👨‍💻 👩‍🔬 🧑‍🔬 👨‍🔬 👩‍🚀 🧑‍🚀 👨‍🚀 👩‍⚕️ 🧑‍⚕️ 👨‍⚕️ 👩‍⚖️ 🧑‍⚖️ 👨‍⚖️ 👩‍✈️ 🧑‍✈️ 👨‍✈️ 💂‍♀️ 💂 💂‍♂️ 🕵️‍♀️ 🕵 🕵️‍♂️ 🤶 🎅 🕴️‍♀️ 🕴 🕴️‍♂️ 🦸‍♀️ 🦸 🦸‍♂️ 🦹‍♀️ 🦹 🦹‍♂️ 🧙‍♀️ 🧙 🧙‍♂️ 🧝‍♀️ 🧝 🧝‍♂️ 🧚‍♀️ 🧚 🧚‍♂️ 🧞‍♀️ 🧞 🧞‍♂️ 🧜‍♀️ 🧜 🧜‍♂️ 🧛‍♀️ 🧛 🧛‍♂️ 🧟‍♀️ 🧟 🧟‍♂️ 👯‍♀️ 👯 👯‍♂️ 👪 👨‍👩‍👧 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👦 👩‍👧 👩‍👧‍👦 👩‍👦‍👦 👩‍👧‍👧 👨‍👦 👨‍👧 👨‍👧‍👦 👨‍👦‍👦 👨‍👧‍👧

🚗 🚙 🚕 🛺 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🚚 🚛 🚜 🏍 🛵 🚲 🦼 🦽 🛴 🛹 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚝 🚄 🚅 🚈 🚞 🚂 🚆 🚇 🚊 🚉 🚁 🛩 ✈ 🛫 🛬 🪂 💺 🛰 🚀 🛸 🛶 ⛵ 🛥 🚤 ⛴ 🛳 🚢 ⚓ ⛽ 🚧 🚏 🚦 🚥 🛑 🎡 🎢 🎠 🏗 🌁 🗼 🏭 ⛲ 🎑 ⛰ 🏔 🗻 🌋 🗾 🏕 ⛺ 🏞 🛣 🛤 🌅 🌄 🏜 🏖 🏝 🌇 🌆 🏙 🌃 🌉 🌌 🌠 🎇 🎆 🏘 🏰 🏯 🏟 🗽 🏠 🏡 🏚 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪ 🕌 🛕 🕍 🕋 ⛩

⌚ 📱 📲 💻 ⌨ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎ 📟 📠 📺 📻 🎙 🎚 🎛 ⏱ ⏲ ⏰ 🕰 ⏳ ⌛ 🧮 📡 🔋 🔌 💡 🔦 🕯 🧯 🗑 🛢 🛒 💸 💵 💴 💶 💷 💰 💳 🧾 💎 ⚖ 🦯 🧰 🔧 🔨 ⚒ 🛠 ⛏ 🪓 🔩 ⚙ ⛓ 🧱 🔫 🧨 💣 🔪 🗡 ⚔ 🛡 🚬 ⚰ ⚱ 🏺 🔮 📿 🧿 💈 🧲 ⚗ 🧪 🧫 🧬 🔭 🔬 🕳 💊 💉 🩸 🩹 🩺 🌡 🏷 🔖 🚽 🚿 🛁 🛀 🪒 🧴 🧻 🧼 🧽 🧹 🧺 🔑 🗝 🛋 🪑 🛌 🛏 🚪 🧳 🛎 🖼 🧭 🗺 ⛱ 🗿 🛍 🎈 🎏 🎀 🧧 🎁 🎊 🎉 🎎 🎐 🏮 🪔 ✉ 📩 📨 📧 💌 📮 📪 📫 📬 📭 📦 📯 📥 📤 📜 📃 📑 📊 📈 📉 📄 📅 📆 🗓 📇 🗃 🗳 🗄 📋 🗒 📁 📂 🗂 🗞 📰 📓 📕 📗 📘 📙 📔 📒 📚 📖 🔗 📎 🖇 ✂ 📐 📏 📌 📍 🧷 🧵 🧶 🔐 🔒 🔓 🔏 🖊 🖋 ✒ 📝 ✏ 🖍 🖌 🔍 🔎 👚 👕 🥼 🦺 🧥 👖 👔 👗 👘 🥻 🩱 👙 🩲 🩳 💄 💋 👣 🧦 👠 👡 👢 🥿 👞 👟 🩰 🥾 🧢 👒 🎩 🎓 👑 ⛑ 🎒 👝 👛 👜 💼 👓 🕶 🥽 🧣 🧤 💍 🌂 ☂

☮ ✝ ☪ 🕉 ☸ ✡ 🔯 🕎 ☯ ☦ 🛐 ⛎ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ 🆔 ⚛ ⚕ ☢ ☣ 📴 📳 🈶 🈚 🈸 🈺 🈷 ✴ 🆚 🉑 💮 🉐 ㊙㊗ 🈴 🈵 🈹 🈲 🅰 🅱 🆎 🆑 🅾 🆘 ⛔ 📛 🚫 ❌ ⭕ 💢 ♨ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗ ❕ ❓ ❔ ‼ ⁉ 💯 🔅 🔆 🔱 ⚜ 〽 ⚠ 🚸 🔰 ♻ 🈯 💹 ❇ ✳ ❎ ✅ 💠 🌀 ➿ 🌐 ♾ Ⓜ 🏧 🚾 ♿ 🅿 🈳 🈂 🛂 🛃 🛄 🛅 🚰 🚹 ♂ 🚺 ♀ ⚧ 🚼 🚻 🚮 🎦 📶 🈁 🆖 🆗 🆙 🆒 🆕 🆓 0⃣ 1⃣ 2⃣ 3⃣ 4⃣ 5⃣ 6⃣ 7⃣ 8⃣ 9⃣ 🔟 🔢 ▶ ⏸ ⏯ ⏹ ⏺ ⏏ ⏭ ⏮ ⏩ ⏪ 🔀 🔁 🔂 ◀ 🔼 🔽 ⏫ ⏬ ➡ ⬅ ⬆ ⬇ ↗ ↘ ↙ ↖ ↕ ↔ 🔄 ↪ ↩ 🔃 ⤴ ⤵ #⃣ *⃣ ℹ 🔤 🔡 🔠 🔣 🎵 🎶 〰 ➰ ✔ ➕ ➖ ➗ ✖ 💲 💱 © ® ™ 🔚 🔙 🔛 🔝 🔜 ☑ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ ◼ ◻ ◾ ◽ ▪ ▫ 🔸 🔹 🔶 🔷 🔺 🔻 🔲 🔳 🔈 🔉 🔊 🔇 📣 📢 🔔 🔕 🃏 🀄 ♠ ♣ ♥ ♦ 🎴 👁‍🗨 🗨 💭 🗯 💬 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧

🏳 🏴 🏁 🚩 🎌 🏴‍☠️ 🏳️‍🌈 🏳️‍⚧️ 🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇨 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇫🇷 🇬🇦 🇬🇧 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇳 🇭🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇮🇹 🇯🇪 🇯🇲 🇯🇴 🇯🇵 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇷 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴 🇳🇵 🇳🇷 🇳🇺 🇳🇿 🇴🇲 🇵🇦 🇵🇪 🇵🇫 🇵🇬 🇵🇭 🇵🇰 🇵🇱 🇵🇲 🇵🇳 🇵🇷 🇵🇸 🇵🇹 🇵🇼 🇵🇾 🇶🇦 🇷🇪 🇷🇴 🇷🇸 🇷🇺 🇷🇼 🇸🇦 🏴󠁧󠁢󠁳󠁣󠁴󠁿 🇸🇧 🇸🇨 🇸🇩 🇸🇪 🇸🇬 🇸🇭 🇸🇮 🇸🇰 🇸🇱 🇸🇲 🇸🇳 🇸🇴 🇸🇷 🇸🇸 🇸🇹 🇸🇻 🇸🇽 🇸🇾 🇸🇿 🇹🇦 🇹🇨 🇹🇩 🇹🇫 🇹🇬 🇹🇭 🇹🇯 🇹🇰 🇹🇱 🇹🇲 🇹🇳 🇹🇴 🇹🇷 🇹🇹 🇹🇻 🇹🇼 🇹🇿 🇺🇦 🇺🇬 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇦 🇻🇨 🇻🇪 🇻🇬 🇻🇮 🇻🇳 🇻🇺 🏴󠁧󠁢󠁷󠁬󠁳󠁿 🇼🇫 🇼🇸 🇽🇰 🇾🇪 🇾🇹 🇿🇦 🇿🇲 🇿🇼

2020年7月22日星期三

css 使用變數

css 可以使用一些 function , 例如 calc 可以計算，還有一個比較少用的 var 這個變數的 function 
  
規則 : 
    
1. 變數前面要加 **"<font color='#f00'>--</font>"**
2. var 內容別放空格

範例如下:

```
$mmcode(r1)
```
  
<div class="mmresult r1">

--aa:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.1em,#0000 0.1em,#0000 1em) 0em 0em;

--bb:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em;

--cc:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em;

}

.a07221_c1
{
  width:6.1em;
  height:1em;
  background: var(--aa),var(--bb),var(--cc); 
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

</div>
  
var 也可以搭配 calc 做計算 , 這樣可以把很多參數設為變數, 如果要修改，不需要一個一個改了

```
$mmcode(r2)
```
  
<div class="mmresult r2">

</div>

css 可以使用一些 function , 例如 calc 可以計算，還有一個比較少用的 var 這個變數的 function

規則 :

變數前面要加 "--"
var 內容別放空格

範例如下:



<style>
body
{
  --color1:#e00;

  --aa:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.1em,#0000 0.1em,#0000 1em) 0em 0em;

  --bb:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em;

  --cc:repeating-linear-gradient(90deg, var(--color1),var(--color1) 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em;

}

.a07221_c1
{
  width:6.1em;
  height:1em;
  background: var(--aa),var(--bb),var(--cc); 
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

<div class="a07221_c1">
</div>

var 也可以搭配 calc 做計算 , 這樣可以把很多參數設為變數, 如果要修改，不需要一個一個改了



<style>
.a07222_c0
{
  display:inline-block;
  background-color:#ee0;

  --c1:#f00;
  --c2:#0a0;
  --c3:#00f;
  --h1:3em;
  --h2:2em;
  --h3:1em;

}
.a07222_c1
{
  color:var(--c1,#0f0);
  height:var(--h1);
}
.a07222_c2
{
  color:var(--c2);
  height:calc( var(--h1) + var(--h2) );
}
.a07222_c3
{
  color:var(--c3);
  height:calc( var(--h1) + var(--h2) + var(--h3) );
}
</style>

<div class="a07222_c0 a07222_c1">
aaaa
</div>
<div class="a07222_c0 a07222_c2">
aaaa
</div>
<div class="a07222_c0 a07222_c3">
aaaa
</div>

aaaa

2020年7月17日星期五

background

網頁上要秀一張圖，第一個想到的是 `<img src=xxx>` 這個方式，後來才發現有個更好用的，叫做 background-image , 雖然知道有些特別的用法，卻一直沒有去深入瞭解, 所以在這做個小筆記!

```
$mmcode(r1)
```

<div class="mmresult r1">
<style>
/*
   background 可以設定很多張圖片，只需用逗號分隔, 
   上下層是由上而下，第一個圖片會在最上方
*/
.a07171_aa
{
  width:20em;
  height:10em;
  background-color: #ff0;
  background-image: url(https://yiharng.github.io/bomb.png)
                   ,url(https://yiharng.github.io/bird.jpg);
  background-position: 0em 0em,2em 0em;
  background-size: 5em 5em,16em 10em;
  background-repeat: repeat, no-repeat;
}
/*
   可以用下面這個方式合併來寫
*/
.a07171_bb
{
  width:20em;
  height:10em;
  background:url(https://yiharng.github.io/bomb.png) 0em 0em/5em 5em repeat
      , #ff0 url(https://yiharng.github.io/bird.jpg) 2em 0em/16em 10em no-repeat;
  
  /*
      注意那個 #ff0 背景顏色設定，必須在最後一個才能設定
  */
}
</style>

背景圖片不一定要用圖片，也可以用 repeating-linear-gradient 和 repeating-radial-gradient 來產生線性漸層或圓形漸層的背景, 如果再控制好大小和座標，基本上可以用來畫圖了
  
```
$mmcode(r2)
```
  
<div class="mmresult r2">
<style>
.a07172_c1
{
  width:20em;
  height:10em;
  background-image: 
    repeating-linear-gradient(0deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-linear-gradient(90deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-radial-gradient(
      #f00, #ff0 10%, #0f0 15%,#f00 20%);
  background-position:0em 0em,0em 0em,10em 1em;
  background-size:auto auto,auto auto,5em 5em;
  background-repeat:no-repeat;
}
</style>

<div class="a07172_c1">
</div>
</div>
  
repeating-linear-gradient 很好玩的地方就是, 他自帶 repeat 功能，可以很容易實現尺規的繪製

```
$mmcode(r3)
```
  
<div class="mmresult r3">
<style>
.a07173_c1
{
  width:6.1em;
  height:1em;
  background: 
    repeating-linear-gradient(90deg, #000,#000 0.1em,#0000 0.1em,#0000 1em) 0em 0em,
    repeating-linear-gradient(90deg, #000,#000 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em,
    repeating-linear-gradient(90deg, #000,#000 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em
    ;
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

repeating-radial-gradient 可以用來畫圓，加上 ::before 及 ::after 用邊框來畫三角形，就可以畫出之前靠邊框做不到的箭頭  
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">
<style>
.a07174_c1
{
  width:10em;
  height:10em;
  background: 
    repeating-linear-gradient(0deg, #0000,#0000 40%,#fff 40%,#fff 60%) 0em 0em,
    repeating-radial-gradient(#0000, #0000 40%, #0bb 0%, #0bb 60%) 0em 0em;
  background-repeat:no-repeat;
  background-color:#fff;
  position:relative;
  border-radius:100em;
  animation:a07174_a1 3s 0s linear infinite;
}
.a07174_c1::before
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0000 #0bb #0bb #0000;
  left:68%;
  top:20%;
  transform:rotate(30deg);
}
.a07174_c1::after
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0bb #0000 #0000 #0bb;
  left:6%;
  top:53%;
  transform:rotate(30deg);
}
@keyframes a07174_a1
{
  100%
  {
    transform:rotate(360deg);
  }
}
</style>

<div class="a07174_c1">
</div>
</div>
  
repeating-radial-gradient 的詳細說明

參考網址：https://www.runoob.com/cssref/func-repeating-radial-gradient.html
  
repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape : ellipse (預設), circle <br>
size  : farthest-corner (預設), closest-side, closest-corner, farthest-side
  
可以利用這個來晝半圓
  
```
$mmcode(r5)
```
  
<div class="mmresult r5">
<style>
.a07175_c1
{
  width:10em;
  height:10em;
  background: 
/*
    完整寫法 :
    repeating-radial-gradient(ellipse farthest-corner at 50% 100%
*/      
    repeating-radial-gradient(at 50% 100%
      , #0000
      , #0000 40%
      , #a0f  40%
      , #0ff  48%
      , #0f0  50%
      , #ff0  52%
      , #f00  60%
    ) 0em 0em/10em 5em;
  background-repeat:no-repeat;
  background-color:#9ff;
}
</style>

<div class="a07175_c1">
</div>
</div>
  
-----------------------------------------------------

# background-attachment

scroll - 預設, 就是像牆壁的背景，不會跟著捲動而移動<br>
local  - 背景圖片會隨著捲動而移動<br>
fixed  - 背景圖片的位置是固定在螢幕上的，不會隨著 div 移動而移動<br>

**<font color="#ff0000">在 iPhone 上似忽只有 scroll 其它的不支援</font>**

<div class="a07176_c1">
background-attachment<br><br>
<label>
<input type="radio" name="a07176_s1" checked> <span>scroll,scroll</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>scroll,local</span>
</label><br>
<label>
<input type="radio" name="a07176_s1"> <span>local,scroll</span>
</label><br>
</div>

<div class="a07176_c2">
<div>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
 <div class="a07176_c3">fixed</div><br>
This is a background test.<br>
 <div class="a07176_c4">scroll/local</div><br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
This is a background test.<br>
</div>
</div>

var k=document.querySelector(".a07176_c2");
  var kn=3;
  setInterval(function()
  {
    let k1=k.scrollTop;
    k.scrollTop+=kn;
    if (k1==k.scrollTop) kn=-3;
    if (k.scrollTop>=k.scrollTopMax-3) kn=-3;
    if (k.scrollTop<=0) kn=3;
  },30);
})();
</script>  
  
-----------------------------------------------------

# background-clip

背景的裁切，最好玩的地方是可以用文字裁切，可以做文字的特效

**<font color="#ff0000">在 iPhone 和 Mac 的 safari 對於 text 的支援有點不一樣</font>**  
  
<style>
.a07177_c1
{
  display:inline-block;
  width:40%;
  vertical-align:top;
  font-size:1.5em;
}
.a07177_c1 label
{
  display:inline-block;
  border:1px solid #000;
  width:8em;
  padding:0.2em;
  margin:0.1em;
}
.a07177_c2
{
  display:inline-block;
  width:calc(59% - 2em);
  height:4em;
  background:
    url(https://yiharng.github.io/bird.jpg) 0 0/100%;
  background-repeat:repeat;
  color:#ff0;
  font-size:3em;  
  font-weight:900;
  line-height:1em;
  overflow:auto;
  text-align:center;
  border:0.5em dashed #f00;
  padding:0.5em;
/*
  color: transparent;
  -webkit-background-clip: text;
*/  
  font-family:Impact, Charcoal, sans-serif;
}
</style>

<div class="a07177_c1">
background-clip<br>
<label>
<input type="radio" name="a07177_s1" checked> <span>border-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>padding-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>content-box</span>
</label><br>
<label>
<input type="radio" name="a07177_s1"> <span>text</span>
</label><br>
</div>

<div class="a07177_c2"><br>
This is a background test.
</div>

$(".a07177_c2").css("background-clip",c);
    $(".a07177_c2").css("-webkit-background-clip",c);

if (c=="text")
    {
      $(".a07177_c2").css("color","transparent");
    }
    else
    {
      $(".a07177_c2").css("color","#ff0");
    }
  });

})();
</script>
  
-----------------------------------------------------

網頁上要秀一張圖，第一個想到的是 <img src=xxx> 這個方式，後來才發現有個更好用的，叫做 background-image , 雖然知道有些特別的用法，卻一直沒有去深入瞭解, 所以在這做個小筆記!


<style>
/*
   background 可以設定很多張圖片，只需用逗號分隔, 
   上下層是由上而下，第一個圖片會在最上方
*/
.a07171_aa
{
  width:20em;
  height:10em;
  background-color: #ff0;
  background-image: url(https://yiharng.github.io/bomb.png)
                   ,url(https://yiharng.github.io/bird.jpg);
  background-position: 0em 0em,2em 0em;
  background-size: 5em 5em,16em 10em;
  background-repeat: repeat, no-repeat;
}
/*
   可以用下面這個方式合併來寫
*/
.a07171_bb
{
  width:20em;
  height:10em;
  background:url(https://yiharng.github.io/bomb.png) 0em 0em/5em 5em repeat
      , #ff0 url(https://yiharng.github.io/bird.jpg) 2em 0em/16em 10em no-repeat;

  /*
      注意那個 #ff0 背景顏色設定，必須在最後一個才能設定
  */
}
</style>

<div class="a07171_aa">
</div>
<br>
<div class="a07171_bb">
</div>

背景圖片不一定要用圖片，也可以用 repeating-linear-gradient 和 repeating-radial-gradient 來產生線性漸層或圓形漸層的背景, 如果再控制好大小和座標，基本上可以用來畫圖了


<style>
.a07172_c1
{
  width:20em;
  height:10em;
  background-image: 
    repeating-linear-gradient(0deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-linear-gradient(90deg, 
      #00000088,#00000055 1em, 
      transparent 1em,transparent 3em)
    ,repeating-radial-gradient(
      #f00, #ff0 10%, #0f0 15%,#f00 20%);
  background-position:0em 0em,0em 0em,10em 1em;
  background-size:auto auto,auto auto,5em 5em;
  background-repeat:no-repeat;
}
</style>

<div class="a07172_c1">
</div>

repeating-linear-gradient 很好玩的地方就是, 他自帶 repeat 功能，可以很容易實現尺規的繪製


<style>
.a07173_c1
{
  width:6.1em;
  height:1em;
  background: 
    repeating-linear-gradient(90deg, #000,#000 0.1em,#0000 0.1em,#0000 1em) 0em 0em,
    repeating-linear-gradient(90deg, #000,#000 0.05em,#0000 0.05em,#0000 1em) 0.525em 0.5em/auto 1em,
    repeating-linear-gradient(90deg, #000,#000 0.02em,#0000 0.02em,#0000 0.1em) 0.04em 0.7em/auto 1em
    ;
  background-repeat:no-repeat;
  font-size:3em;
}
</style>

<div class="a07173_c1">
</div>

repeating-radial-gradient 可以用來畫圓，加上 ::before 及 ::after 用邊框來畫三角形，就可以畫出之前靠邊框做不到的箭頭


<style>
.a07174_c1
{
  width:10em;
  height:10em;
  background: 
    repeating-linear-gradient(0deg, #0000,#0000 40%,#fff 40%,#fff 60%) 0em 0em,
    repeating-radial-gradient(#0000, #0000 40%, #0bb 0%, #0bb 60%) 0em 0em;
  background-repeat:no-repeat;
  background-color:#fff;
  position:relative;
  border-radius:100em;
  animation:a07174_a1 3s 0s linear infinite;
}
.a07174_c1::before
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0000 #0bb #0bb #0000;
  left:68%;
  top:20%;
  transform:rotate(30deg);
}
.a07174_c1::after
{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border:#000 solid 1.3em;
  border-color:#0bb #0000 #0000 #0bb;
  left:6%;
  top:53%;
  transform:rotate(30deg);
}
@keyframes a07174_a1
{
  100%
  {
    transform:rotate(360deg);
  }
}
</style>

<div class="a07174_c1">
</div>

repeating-radial-gradient 的詳細說明

參考網址：https://www.runoob.com/cssref/func-repeating-radial-gradient.html

repeating-radial-gradient(shape size at position, start-color, ..., last-color);

shape : ellipse (預設), circle
size : farthest-corner (預設), closest-side, closest-corner, farthest-side

可以利用這個來晝半圓


<style>
.a07175_c1
{
  width:10em;
  height:10em;
  background: 
/*
    完整寫法 :
    repeating-radial-gradient(ellipse farthest-corner at 50% 100%
*/      
    repeating-radial-gradient(at 50% 100%
      , #0000
      , #0000 40%
      , #a0f  40%
      , #0ff  48%
      , #0f0  50%
      , #ff0  52%
      , #f00  60%
    ) 0em 0em/10em 5em;
  background-repeat:no-repeat;
  background-color:#9ff;
}
</style>

<div class="a07175_c1">
</div>

background-attachment

scroll - 預設, 就是像牆壁的背景，不會跟著捲動而移動
local - 背景圖片會隨著捲動而移動
fixed - 背景圖片的位置是固定在螢幕上的，不會隨著 div 移動而移動

在 iPhone 上似忽只有 scroll 其它的不支援

background-attachment

scroll,scroll
local,local
scroll,local
local,scroll

This is a background test.
This is a background test.
This is a background test.

fixed

This is a background test.

scroll/local

This is a background test.
This is a background test.
This is a background test.
This is a background test.
This is a background test.

background-clip

背景的裁切，最好玩的地方是可以用文字裁切，可以做文字的特效

在 iPhone 和 Mac 的 safari 對於 text 的支援有點不一樣

background-clip
border-box
padding-box
content-box
text

This is a background test.

2020年7月3日星期五

即時操作 CSS - cssjson.js

上一篇本來想寫個操作所有 CSS 的程式, 卻發現只要在不同網域其實是無法修改的，最簡單的方式還是用新的取代舊的，而 CSS 的設計又有點奇怪，刪除就是該設定全部刪掉了，既然如此，就來寫一個加強版的CSS 工具，用 json 來操作 CSS
  
原始碼 : https://github.com/yiharng/cssjson  
  
首先先加入 cssjson.js
  
```
<script src="https://yiharng.github.io/cssjson.min.js"></script>  
  
```

# 使用方式
  
```
  var rc=cssjson();//在 head 新增一個 style
  var rc=cssjson("body");//在 body 新增一個 style
  var rc=cssjson("style");//使用目前網頁中的第一個 style
  var rc=cssjson("#objid");//使用 id 為 objid 的 style

```

# Functions

```
  rc.list() //列出所有的 css 名稱
  rc.list(".tag") //取得 .tag 的索引位置
  
  rc.get(".tag") //取得 .tag 的 CSS 設定，以 json 型態回傳
  key=rc.get("@key") //取得 @keyframes 名稱為 key 的 CSS 設定
  
  rc.set(".tag",{color:"#f00"}) //新增或取代 .tag 中的 css 設定
  rc.set(".tag","{color:#f00}") //以字串中的設定取代原來的所有設定
  
  rc.del(".tag")//刪除 .tag
  
  key.list() //列出所有的 keyframes 
  key.get("100%") //取得該 frame 的設定，以 json 型態回傳
  key.set("100%",{background-color:"#00f"}) //新增或取代 frame 的設定
  key.del("100%") // 刪除 frame
  
```  
  
這裡寫了一個簡單的範例，用這樣來操作 CSS 方便多了  
  
```
$mmcode(r1)  
```

}
button
{
  font-size:1em;
}
@keyframes a07031_a1
{
  0%
  {
    transform:translate(0em,0em);
  }
  100%
  {
    transform:translate(10em,0em);
  }
}
</style>

<div class="a07031_c1">內容</div>
<br>
<br>
<br>
<button id="a07031_b1">更改 before</button>
<button id="a07031_b2">新增 after</button>
<button id="a07031_b3">新增動畫</button>
<button id="a07031_b4">修改動畫</button>

$("#a07031_b1").on("click",()=>
  {
    rc.set(".a07031_c1::before",{color:"#05f"});
  });

$("#a07031_b2").on("click",()=>
  {
    rc.set(".a07031_c1::after",{content:'" [我是After]"',color:"#f0a"});
  });

$("#a07031_b3").on("click",()=>
  {
    rc.set(".a07031_c1",{animation:"a07031_a1 3s 0s ease infinite"});
  });

$("#a07031_b4").on("click",()=>
  {
    let k=rc.get("@a07031_a1");
    if (k.get("50%"))
    {
      k.set("50%",null); // k.del("50%"); 也可以
    }
    else
    {
      k.set("50%",{transform:"translate(5em,2em)"});
    }
  });

})();
</script>
  
</div>

上一篇本來想寫個操作所有 CSS 的程式, 卻發現只要在不同網域其實是無法修改的，最簡單的方式還是用新的取代舊的，而 CSS 的設計又有點奇怪，刪除就是該設定全部刪掉了，既然如此，就來寫一個加強版的CSS 工具，用 json 來操作 CSS

原始碼 : https://github.com/yiharng/cssjson

首先先加入 cssjson.js

<script src="https://yiharng.github.io/cssjson.min.js"></script>

使用方式

  var rc=cssjson();//在 head 新增一個 style
  var rc=cssjson("body");//在 body 新增一個 style
  var rc=cssjson("style");//使用目前網頁中的第一個 style
  var rc=cssjson("#objid");//使用 id 為 objid 的 style

Functions

  rc.list() //列出所有的 css 名稱
  rc.list(".tag") //取得 .tag 的索引位置

  rc.get(".tag") //取得 .tag 的 CSS 設定，以 json 型態回傳
  key=rc.get("@key") //取得 @keyframes 名稱為 key 的 CSS 設定

  rc.set(".tag",{color:"#f00"}) //新增或取代 .tag 中的 css 設定
  rc.set(".tag","{color:#f00}") //以字串中的設定取代原來的所有設定

  rc.del(".tag")//刪除 .tag

  key.list() //列出所有的 keyframes 
  key.get("100%") //取得該 frame 的設定，以 json 型態回傳
  key.set("100%",{background-color:"#00f"}) //新增或取代 frame 的設定
  key.del("100%") // 刪除 frame

這裡寫了一個簡單的範例，用這樣來操作 CSS 方便多了



<style id="a07031_id">
.a07031_c1::before
{
  content:"[我是Before] ";
  color:#00aa00;

}
button
{
  font-size:1em;
}
@keyframes a07031_a1
{
  0%
  {
    transform:translate(0em,0em);
  }
  100%
  {
    transform:translate(10em,0em);
  }
}
</style>

<div class="a07031_c1">內容</div>
<br>
<br>
<br>
<button id="a07031_b1">更改 before</button>
<button id="a07031_b2">新增 after</button>
<button id="a07031_b3">新增動畫</button>
<button id="a07031_b4">修改動畫</button>

<script src="https://yiharng.github.io/cssjson.min.js"></script>  

<script>
(function()
{
  var rc=cssjson("#a07031_id");

  $("#a07031_b1").on("click",()=>
  {
    rc.set(".a07031_c1::before",{color:"#05f"});
  });

  $("#a07031_b2").on("click",()=>
  {
    rc.set(".a07031_c1::after",{content:'" [我是After]"',color:"#f0a"});
  });

  $("#a07031_b3").on("click",()=>
  {
    rc.set(".a07031_c1",{animation:"a07031_a1 3s 0s ease infinite"});
  });

  $("#a07031_b4").on("click",()=>
  {
    let k=rc.get("@a07031_a1");
    if (k.get("50%"))
    {
      k.set("50%",null); // k.del("50%"); 也可以
    }
    else
    {
      k.set("50%",{transform:"translate(5em,2em)"});
    }
  });

})();
</script>

內容

訂閱：文章 (Atom)

TP Notes

Translate

2020年7月24日星期五

網頁可用的符號

2020年7月23日星期四

網頁可用的符號資源收集

2020年7月22日星期三

css 使用變數

2020年7月17日星期五

background

background-attachment

background-clip

2020年7月3日星期五

即時操作 CSS - cssjson.js

使用方式

Functions

Translate

2020年7月24日 星期五

網頁可用的符號

2020年7月23日 星期四

網頁可用的符號資源收集

2020年7月22日 星期三

css 使用變數

2020年7月17日 星期五

background

background-attachment

background-clip

2020年7月3日 星期五

即時操作 CSS - cssjson.js

使用方式

Functions

2020年7月24日星期五

2020年7月23日星期四

2020年7月22日星期三

2020年7月17日星期五

2020年7月3日星期五