·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站需求分析 >> 网页布局教程:页面设计中的中文测试

网页布局教程:页面设计中的中文测试

作者:佚名      网站需求分析编辑:admin      更新时间:2022-07-23

最早大概在2002年左右,为了追求更酷更炫的字体效果,中国设计师们尝试过用CSS2的@font-face属性嵌入OpenType字体文件(eot或ote等格式)。定义样式如下:
@font-face { font-family:'comic'; src:url('http://valid_url/some_font_file.eot');}
@font-face { font-family:'dreamy'; font-weight:bold; src:url('http://www.example.com/font.eot');}

但这个方案很麻烦,且效率低下支持不好,所以用的极少。第一,中文字体文件一般很大,在效率角度考虑容易影响可访问性。第二,此方案不具备通用性,针对不同浏览器需要不同格式字体文件来支持。问题二在去年7月已经有国外同行解决了,简单总结如下:

  • EOT格式,适用于IE
  • TTF或OTF格式,适用于Firefox, Safari, Opera
  • SVG格式,适用于Chrome

以上提到了很多种字体格式,有网站在线提供转换工具。可以看到,各浏览器的兼容模式相当复杂,并且根据测试结果,各浏览器不断升级过程中还会碰到问题。所以,我想完美解决我想还有段时间,受制于规范未统一。定义样式如下:
@font-face {
font-family:'FontName';
src:url('FontFileName.eot');
src:local('FontName Regular'), local('FontName'), url('FontFileName.ttf') format('truetype'), url('FontFileName.svg#FontName') format('svg');}
.FontName { font-family:"FontName";}

同时,为了追求中文更丰富的表现形式,中国设计师也作出了不懈探索。比如日文字体Mingliu和PMingliu可以清晰显示11px的中文,甚至10px也可以用MS UI Gothic来显示,这些字体在所有Windows系统中都有。定义样式如下:
font-size:11px; font-family:Mingliu;
font-size:11px; font-family:PMingliu;
font-size:10px; font-family:MS UI Gothicu;

2004年赵鹏在blueidea发表如何使用11px及10px的清晰汉字,详述了如何在Photoshop中使用以上三种字体样式。web应用也类似,只需把页面样式定义为UTF-8编码。如下是效果图:

11px及10px的清晰汉字效果图

但是小技巧、小花招同样经不起时间的考验,毕竟10px和11px字号在日趋增大的分辨率下可识别性并不好。所以我们忙了一圈又回来了,现在常用的字体字号几乎与八九年前无异,只不过由于屏幕和分辨率的增大,常规字号由12px增大到了14px。另外据我观察,大号“黑体”字的使用频率在增高,在新闻资讯类网站常见。

2004年网易新闻头条截图

上图:2004年网易新闻头条模块(标题是图片)
下图:2010年网易新闻头条模块(标题20px黑体)

2010年网易新闻头条截图

也许是微软意识到了非罗马文字的痛苦,因此才在Vista系统中默认推出了经过精心设计的“微软雅黑”字体(中国方正集团设计),全面支持ClearType(亚像素微调字体平滑)技术,以取代目前已经审美疲劳的“宋体”。注意,不是对中国用户的偏爱,Vista为日文、韩文也分别设计了CleraType专用字体。

但是,因为Vista之前操作系统的浏览器显示“微软雅黑”效果欠佳,且不同操作系统、不同浏览器对“微软雅黑”的支持和渲染还存在问题,目前中文网页设计师还不敢轻易的大量定义“微软雅黑”字体。也许要等到IE6完全淘汰,或者Windows7 + IE8的时代,才能完成更新革命。