sans-serif 是個詭異的字體

這幾天改自己網站的 theme 字體發現了一個地方怪怪的,就是在 IE 11 下一般小字體文字會是糊的,用了新細明體也一樣糊掉。後來發現是 sans-serif 這個字型在作怪。

我寫個測試範例,有 IE 11 的也可以看看

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8"/>
<style>

.test1 {
    font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif,"新細明體";
    font-weight: 400;
}
.test2 {
    font: 13px/20px "Helvetica Neue", Helvetica, Arial, "新細明體",sans-serif;
    font-weight: 400;
    -ms-filter: none;
    filter:none;
}
</style>
</head>
<body>
<p class="test1">會糊掉的中文</p>
<p class="test2">清楚的的中文</p>
</body>
</html>

這個範例在 IE 11 的顯示效果如下

ie11-test-smooth-text

範例中第 8 及第 12 行是關鍵,字型新細明體只要在 sans-serif 前面就可以了耶,這種狀況其實 FireFox 和 Chrome 不會發生,只有我用 IE 11 測試時才會,不曉得 IE 8 9 10 會不會,總之很怪啦,而這個字體應該只有包英文字體而已,理論上不會去對中文做任何渲染呀。

反正就是 ……

ie-kill-me

 

 

發佈留言