charset

Posted on Edited on In , Views: Disqus:

 

一、html charset

準備一個由 big5 編碼成的檔案內容如下

big5.html

<html>


<head>
</head>


<body>
    <p>這是 big5</p>
</body>


</html>

 

準備一個由 utf8 編碼成的檔案內容如下

utf8.html

<html>


<head>
</head>


<body>
    <p>這是 utf-8</p>
</body>


</html>

 

預設以 chrome 瀏覽器開啟直接執行該 big5.html、utf8.html 檔，

皆可正常顯示，不會出現亂碼。

 

預設以 IE11 或 Edge 瀏覽器開啟直接執行該 big5.html、utf8.html 檔，

會發現微軟系的瀏覽器預設編碼為 big5。

 

但是將 big5.html、utf8.html 檔掛在 IIS 上，以 chrome 瀏覽器去瀏覽該 big5.html、utf8.html 檔，

卻出現了亂碼。

 

將 big5.html、utf8.html 檔掛在 IIS 上，以 IE、Edge 瀏覽器去瀏覽該 big5.html、utf8.html 檔，

會發現微軟系的瀏覽器預設編碼也是為 big5。

 

這將會導致致命的問題，就是將來把寫好的網頁放在 IIS 上供眾多使用者瀏覽時，

可能因為開發者沒有查覺檔案在 IIS 上、或是瀏覽器的不同而產生亂碼的情形，

而開發者卻不自知。

 

為了避免這個問題，建議開發者自己應該要固定使用 utf-8 編碼來寫網頁，

並且還要特別宣告 charset="UTF-8"，如下

<html>


<head>
    <meta charset="UTF-8">
</head>


<body>
    <p>這是 utf-8</p>
</body>


</html>

或是

<html>


<head>
    <meta http-equiv="Content-Type" content="charset=utf-8">
</head>


<body>
    <p>這是 utf-8</p>
</body>


</html>

這樣一來瀏覽器所使用的編碼就一致了。

 

二、css charset

承先前把檔案架在 IIS 的方式，準備由 utf-8 編碼成的 index.html 與 mycss.css 範例

index.html

<html>


<head>
    <link rel="stylesheet" media="screen" href="mycss.css" type="text/css" />
</head>


<body>
    <p>html 不指定編碼</p>
    <h1></h1>
</body>


</html>

 

mycss.css

h1:after {
    color: red;
    content: "紅字";
}

執行畫面如下

 

mycss.css

@charset "UTF-8";
h1:after {
    color: red;
    content: "紅字";
}

執行畫面如下

 

說明：

由上可發現，當 html 檔沒特別指定 charset "UTF-8" 時，

對於 css 檔字元的呈現也會出現亂碼問題；

當 css 檔有特別指定 charset "UTF-8" 時，至少可以確保 css 檔這邊不會有編碼問題。