读书人

页面运用雅黑要小心

发布时间: 2012-11-04 10:42:41 作者: rapoo

页面使用雅黑要小心

原文出处搞丢了,对不起原作者了~~

?

微软雅黑一出世,就以结构优美、显示清晰等优点赢得了人们的喜爱,很多网站也开始采用微软雅黑作为正文字体。

但是,在 XP 系统下,微软雅黑有可能会出现显示问题:

页面运用雅黑要小心

页面运用雅黑要小心

页面运用雅黑要小心

XP,IE7

可以看到,微软雅黑在 XP 下的 CRT 显示器非常模糊,很难阅读,在 LCD 显示器里锯齿明显、笔划粗细不一,显示效果还不如宋体。

经测试,微软雅黑在 XP 下的 IE6 和非 IE 浏览器显示有问题,IE7 显示正常。

这与文字渲染引擎有关,微软雅黑是为 Vista 以上的系统设计的,用 XP 的老一代 GDI ClearType 技术渲染时会产生问题,而 IE7 浏览器和 Vista 使用的 WPF ClearType 技术,能正常渲染。(延伸阅读:xp vs. win7 文字渲染效果比较)

所以如要使用微软雅黑,应当只对 IE7 和 Vista 用户显示,而对其他用户仍以宋体显示。

下面 jQuer 代码检测浏览器是否支持 WPF,如果不支持就给 body 添加一个名为“no-support-wpf”的 class 作为标记。

$(document).ready(function() {    var agt = navigator.userAgent,    winVer = Number(agt.replace(/.*Windows NT (\b[\d\.] ).*/i, '$1')),    ieVer = Number(agt.replace(/.*MSIE (\b[\d\.] ).*/i, '$1'));    $.support.WPF = winVer >= 6 || ieVer >= 7;    if (!$.support.WPF) {        $('body').addClass('no-support-wpf');    }});

然后我们就可以通过 CSS 给支持 WPF 的浏览器使用微软雅黑,不支持的使用宋体。

body { font-family: "Microsoft YaHei"; }body.no-support-wpf { font-family: SimSun; }

读书人网 >Web前端

热点推荐