400-114-0800

企业邮箱经销商/代理商

网建知识

您当前位置 > 首页 > 文章栏目:网建知识

 

如何处理网页当中的字体锯齿边缘?

发表时间:2014-04-02

 

印刷字体得益于高分辨率印刷带来的优势,可以傲人地展现出漂亮的曲线和细节。然而一旦到了屏幕上,这些字体的优势会被笨重的像素点所扼杀,从而出现锯齿边缘、字体变形和细节丢失的情况。在显示器生产商能够生产出二百或三百PPl分辨率的屏幕前,类似金华微信平台的设计工程师们将不得不依赖软件技术的进步来解决这些问题。
 
首先让我们来看抗锯齿技术。要想消除锯齿,它的效果仅次于高清显示器。它的原理相当简单:沿着字体的边缘增加半透明的像素点,从而达到平滑“阶梯状”锯齿的效果。当然,在这个过程中,很多因素和技术决定了最后的呈现效果,如字体微调、次像素渲染、软件性能、操作系统和机器规格,这里仅是说到了一些而已。现在,我们来看看作为设计师的你,可以用Photoshop、Flash和CSS来为改善抗锯齿做些什么。另外,我们也会解释硬件、浏览器和操作系统所带来的限制。
 
 
 
QQ截图20140402105348.jpg
 
 
 
 
其次,让我们认识下锯齿和抗锯齿,只需稍加注意就能发现,抗锯齿技术对于文字的清晰度发挥着重要的作用。除了极少数例外,经过抗锯齿处理的文字能显著减轻用户眼部负担,更不用说渲染后的字形更接近于预期设计。因此,设计师如果想要得到好的表现效果,就必须有意识地去使用抗锯齿技术。此外,还需要考虑到自设计到输出的整个过程中诸多的因素。
 
大多数字体渲染引擎都是依靠微调来确定哪些字形区域应该被平滑处理。字体微调或指令,使用数学指令表格使字形与像素网格对齐,并确定哪些像素应该采用哪个灰度。尽管多数软件提供了标准算法的自动微调,但是理想的做法还是由字体设计师手工调整,并嵌入到文件里去。
 
简单来说,这些指令通过修改结构上一些重要的点的位置来起到效果的,例如这些点沿着曲线或者在字干上被找到,指令就将它们在像素边界线上作对齐。次要的点则基于同主要的点的关系再重新定位。使用诸如FontFore这样的开源字体编辑工具,允许你查看并编辑一个字体的微调信息。懂得了产生一个清晰的字形需要投入那么多的工作,你一定对字体设计师和工程师增多了几分感激之情。
 

随机推荐查看更多