首页 » 前端 » UI » 正文

页面使用雅黑字体时要小心

发布者:站点默认
2012/04/28 浏览数(2,125) 分类:UI, 前端 页面使用雅黑字体时要小心已关闭评论

微软雅黑一出世,就以结构优美、显示清晰等优点赢得了人们的喜爱,很多网站也开始采用微软雅黑作为正文字体。但是,在 XP 系统下,微软雅黑有可能会出现显示问题:

XP,Firefox,CRT

XP,Firefox,CRT

XP,Firefox,LCD

XP,Firefox,LCD

XP,IE7

XP,IE7

可以看到,微软雅黑在 XP 下的 CRT 显示器非常模糊,很难阅读,在 LCD 显示器里锯齿明显、笔划粗细不一,显示效果还不如宋体。经测试,微软雅黑 在 XP 下的 IE6 和非 IE 浏览器显示有问题,IE7 显示正常。这与文字渲染引擎有关,微软雅黑是为 Vista 以上的系统设计的,用 XP 的老一代 GDI ClearType 技术渲染时会产生问题,而 IE7 浏览器和 Vista 使用的 WPF ClearType 技术,能正常渲染。(延伸阅读:xp vs. win7 文字渲染效果比较 )所以如要使用微软雅黑,应当只对 IE7 和 Vista 用户显示,而对其他用户仍以宋体显示。

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

$(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;
}

<完,本文转自noobjava成长日记中的页面使用雅黑要小心。>

点击返回顶部
  1. 留言
  2. 联系方式