人氣 181°c

解決符號渲染顏色問題

在Html網頁加上特殊符號(Symbols),遇上主流Edge、Chrome、Firefox 瀏覽器,顯示的符號各有不同的特色,有可能圖案大小不一,有可能渲染顏色,有可能在不同的裝置間出現亂碼,無法顯示出來。

本次為了解決表情符號變成Emoji圖案,而無法自行設定喜歡的顏色,需要作出一些CSS修改去調節。

在HTML文件或CSS主題風格加入以下代碼

font-family: "Segoe UI Symbol";

例如﹕

span {
font-family: "Segoe UI Symbol";
}

<span>♡ ❤ ❣ ❥ ۵ Heart Text Symbols - (。♥‿♥。)【I LOVE U】<br />☠ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☮ ☭ ☯ ☸ ☽ ☾ ♕ ♚ ♛ ✙ ✚ ✛ ✜ ✝ ✞ ✟ ✠ ✡ ✢ 卍 卐</span>

預覧效果▼

演示效果:codepen.io

代碼測試︰www.ifreesite.com/runcode.htm

顏色(色碼表)︰www.ifreesite.com/color

標籤: