CSS中文亂碼解決方案

標籤：文章   cap   連結   console   開啟百度   link   title   替換   http   

原文連結：http://caibaojian.com/css-unicode.html

我的CSS裡面有一個content用到了中文，作用主要是在前端日報文章中顯示出“網頁連結”這四個字，然而開啟百度快照看文章的時候卻發現有亂碼的情況。今天來說說怎麼解決CSS中文亂碼。·

解決方案

總結就是不要使用中文字型在需要顯示在頁面的樣式中，而要用 Unicode 編碼後的代碼。比如“網頁連結”這個轉為Unicode代碼為：\7F51\9875\94FE\63A5。

轉化方法

你可以直接在chrome console中輸入：escape(‘網頁連結‘)，出來的是"%u7F51%u9875%u94FE%u63A5"，將其改寫為"\7F51\9875\94FE\63A5",也即是將%u替換為\，就可以放到CSS中了。

常用Unicode代碼

常見的CSS字型名稱，建議也轉為Unicode格式輸入，下面分享一個常見字型Unicode代碼

//code from http://caibaojian.com/css-unicode.html微軟雅黑 \5FAE\8F6F\96C5\9ED1宋體 \5B8B\4F53黑體 \9ED1\4F53仿宋 \4EFF\5B8B微軟正黑體 \5FAE\x8F6F\6B63\9ED1\4F53 (空格) \0020… \2026

以後使用時注意留意一下就好了。

來源：前端開發部落格

CSS中文亂碼解決方案