CSS3中字体平滑处理和抗锯齿渲染

在围观Drupal官方主题的时候，发现了一个有意思的非标准CSS选择器-webkit-font-smoothing，于是上手把玩了一番。如何使用css3字体平滑显示呢 

要知道，W3C对CSS中字体的抗锯齿渲染是有过考虑的，如font-smooth，不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异，总之，他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持，来让字体显示的更加平滑。

-webkit-font-smoothing主要有一下三个属性：

  • none: 无抗锯齿
  • subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows
  • antialiased: 灰度平滑 常用于Android和iOS等移动设备的

不过经过尝试，我的木头眼睛完全分辨不出后两个的区别。 而且这个非标准的CSS只适用于大多数的手机浏览器及Safari和Chrome之类的WebKit内核的桌面浏览器。至于IE系列嘛，你自己不支持，怪我咯~

这里看看实际效果吧，首先是没有采用抗锯齿渲染的：

接下来是采用-webkit-font-smoothing: subpixel-antialiased抗锯齿渲染平滑处理后的效果：

可以看出来，字体边缘的光滑程度还是不一样的，加上后确实好看了不少。

经过测试发现，浏览器的内置基础属性中一般已经包含了字体抗锯齿。但是为了保险起见，还是手动加上一个吧~

我的个人博客，里面会有各种有意思的东西哦，欢迎关注。iamkun.com

时间： 2024-10-07 06:29:18

CSS3中字体平滑处理和抗锯齿渲染的相关文章

CSS3_-webkit-font-smoothing字体抗锯齿渲染

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服.在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多. font-smoothing是非标准的CSS定义.它被列入标准规范的草案中,后由于某些原因从web标准中被移除了. 但是,我们可以用以下两种定义进行抗锯齿渲染 -webkit-font-smoothing: antialiased; /*chrome.safari*/ -moz-osx-font-smoothing: grayscale;/*firefox*/ -webkit-font-s

OpenGL中的颜色混合功能（二）——抗锯齿的处理

在OpenGL中,混合功能的另一个用途是抗锯齿的处理.在绝大多数情况下,一个渲染片段映射到计算机屏幕上的一个像素.因为这些像素都是正方形的,所以通常我们可以清晰的看到两种不同颜色的分界,它们就是我们通常所说的锯齿.锯齿的出现会让人觉得图像是不自然的,极为影响观感.这种锯齿现象是计算机所产生的图像的弱点,这对于我们的许多要求尽可能逼真的渲染任务,都带来了消极的影响. 为了消除图元之间的锯齿状边缘,OpenGL使用混合功能来混合片段的颜色,也就是把像素的目标颜色与周围相邻像素的颜色进行混合.从本质上

（转）Android中实现区域平均算法在图片缩放里的应用（缩放图片抗锯齿）

摘要:Android图片缩放效果较差,尤其是将大尺寸的图片缩放成小尺寸的图片时,即便是加了抗锯齿,锯齿现象也比较严重:而java sdk里的区域平均算法缩放图片,效果就比较完美了,因为jdk不能直接用于安卓项目中(类冲突),也没找到可以使用的替代的library,最终只好自己写,在此分享! 正文: 目前我知道的Android API中的传统的图片抗锯齿优化处理无非就是以下相关的设置: //缩放抗锯齿Bitmap.createScaledBitmap(bitmap, width, height,

Visual Studio 字体抗锯齿插件 Text Sharp

mac用多了胃口是会被养屌不少,系统字体光mactype渲染还不够,今天终于找到了Visual Studio中可以使用的代码字体抗锯齿插件,效果很爽. 用Consolas字体举例: 惨不忍睹. 特效半开后: 好太多了,已经能满足大部分人的需求. 特效全开: 稍微有点渲染过度,导致字体看上去有点糊,还变瘦了. 有了这个插件以后写代码再也不会不爽了,代码优雅字体也要优雅啊; ) 插件链接:https://visualstudiogallery.msdn.microsoft.com/7aafa2ea-

Linux 下 netbeans 字体抗锯齿正解

转自:http://leenjewel.blog.163.com/blog/static/601937922010124444051/ 说来这个不难,主要是我看网上有的写的不是很明确,甚至有的写的根本不对,在这里写个正解. 在netbeans安装目录找到 etc 目录下的 netbeans.conf 文件,用你喜欢的编辑器打开这个文件,在其中加入这个选项          -J-Dawt.useSystemAAFontSettings=on 这里你要注意了,我用的是6.8版本,别的版本我没实验,

OpenGL中的抗锯齿技术

计算机通过离散(不连续)的像素来绘制图形,想象一下,真实世界中,我们画直线,是比连续画的,还是一个点一个点画的?计算机就是一个点一个点画的(很小的矩形).这样就会导致绘制的图形走样(锯齿),消除锯齿的技术就叫反走样(抗锯齿) 可以看这篇:http://blog.csdn.net/mikewolf2009/archive/2009/08/18/4460421.aspx 点示例 当点很大时,显示如下 而我们实际想看到的是一个圆点,而不是矩形 启用抗锯齿后的效果 有点圆了 代码 glPointSize

UE4在PSVR中的抗锯齿和优化相关知识

UE4目前版本(4.15)在PS平台上并不支持MSAA,在未来的版本会加入.也就是说目前没有办法在PS平台上使用Forward Rendering + MSAA的组合 FXAA效率最高,但效果最差,只做了最后的图像边缘锐化 MSAA的优点是物体边缘和贴图分开处理,边缘会比较清晰.缺点是开销会比TAA稍大(即使有硬件支持),另外会有Specular aliasing.在使用MSAA时,可以在材质中打开normal to roughness,这样会使normal上突出的部分更加粗糙,减少高光闪烁.

关于字体的抗锯齿属性

今天看了看天猫的网站,又了解到了一个新的CSS特性,但是没有被正式的web标准所采用,叫做-webkit-font-smoothing,他有三种属性: none ------ 对低像素的文本比较好subpixel-antialiased------默认值antialiased ------抗锯齿很好 这个就是能够让页面上面的字体看起来更加的清晰.

游戏中的抗锯齿杂谈

抗锯齿(英语:anti-aliasing,简称AA),也译为边缘柔化.消除混叠.抗图像折叠有损等.它是一种消除显示器输出的画面中图物边缘出现凹凸锯齿的技术,那些凹凸的锯齿通常因为高分辨率的信号以低分辨率表示或无法准确运算出3D图形坐标定位时所导致的图形混叠(aliasing)而产生的,反锯齿技术能有效地解决这些问题.它通常被用在在数字信号处理.数字摄影.电脑绘图与数码音效及电子游戏等方面,柔化被混叠的数字信号. 抗锯齿技术出现的原因如下:由于高分辨率下的来源信号或连续的模拟信号能够存储较多的数据