Maison > interface Web > tutoriel HTML > 优雅设置网页文字字体[原创]_html/css_WEB-ITnose

优雅设置网页文字字体[原创]_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:55:35
original
1018 Les gens l'ont consulté

微软XP在国内实在是在“深入人心”,虽然微软已经宣布XP“死期”已到,但国内还是大是大把XP用户,这个从IE6在国内占有率为22.2%可以看到。

 

 

详细查看:https://www.modern.ie/en-us/ie6countdown#list

XP已经为大家服务10多年了,TA已经很老了,微软也宣布停止支持XP了,这本是件好事,但国内各种厂随后宣布继续为XP用户“保架护航”提供支持,这不能不说是个好事,但对于天天与IE6兼容性打交道的WEB前端们来讲,还真不是件好事!

 

这导致国内大多中文网站默认字体还要考虑“宋体”优先,但是“宋体”在Windows Vista+上面大大不如“微软雅黑”的丰满锐利,请看下图:



那为何不优先“微软雅黑”呢?一段代码的事啊。

1

font-family :  '微软雅黑' ,’宋体’...

这一句不就解决问题了?开始我也这么认为:Vista+用户默认自带“微软雅黑”字体就会看到更好的网页文字渲染效果,XP用户默认自带“宋体”自然会看到宋体版网页。看起来挺完美的,好吧,来看张对比图:

XP下,左边是宋体,右边是微软雅黑。

这下反过来了,XP下宋体显示效果比微软雅黑锐利均匀,好多了,其它浏览器显示效果也很差。可见上面方案确定已经失败。你或者反驳,这是你测试用的,XP默认是没有微软雅黑的,可以忽略。是的,但国内大多用的盗版,网上查了下各种厂商XP Ghost版本已经好心的帮用户装上了微软雅黑,当然必须内置了他们厂商赚钱的软件、网址导航等,还有部分设计等需要自己安装上的,所以此路真的不通。

 

那还是默认宋体吧,坐等XP完全消失那天。

不用,我们来分析一下,XP用的最多的应该是默认IE6,最大也只支持到IE8,那就好办了,专门针对IE8至IE6用hack专门写个样式:

1

font-family :  sans-serif ;

就好了,至于XP下使用其它浏览器的,就先不考虑了,能自己选择浏览器的人应该也能换个更好的系统,是吧。

下面看下“font-family: sans-serif;”下的显示

XP系统IE6显示:

哇,很赞,而且可以看到左边中英文混排情况下,英文显示的更为漂亮哦。(右边固定字体的中英混排英文显示有些难看)

 

Win8系统IE11显示:

左右显示一致,以系统默认字体微软雅黑显示。

 

Win8系统opera下:

这个不尽人意,左边是以默认宋体显示的,这种情况会发生在其它第三方浏览器上,如:Firefox\Chrome等。

 

 

OS X Mavericks系统Safari 7.0下:

显示也非常完善,英文略有差异,不过都非常棒。

 

想在线查看各种系统和设备显示示截图可访问微软官方出品(包括各种OS下,各种手机、pad设备下显示截图):
https://modern.ie/zh-cn/screenshots

 

请原谅我的语无伦次吧,综上所述:
上面方法还是不够完善的,在最新Windows系统上第三方浏览器还是会以宋体显示(这取决于各个浏览器默认样式的字体定义),所以,最终结果是非常不推荐使用。

但无意中发现如果存在中英文混排,倒是可以使用

 

font-family :  sans-serif

这绝对是个不错的选择。

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal