css定义字体平滑效果如何做

html-css08

css定义字体平滑效果如何做,第1张

-webkit-font-smoothing: subpixel-antialiased

抗锯齿渲染平滑处理效果

经过测试发现,浏览器的内置基础属性中一般已经包含了字体抗锯齿。不过但是为了保险起见,你一定要加样式的话,那就手动加上一个吧

另外:

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

none: 无抗锯齿

subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows

antialiased: 灰度平滑 常用于Android和iOS等移动设备的

每个人的系统字体type渲染设置中清晰度、平滑等设置不同看不做的网页字体效果也不同(还有window和mac渲染方式根本不一样等问题),网页上的字体是系统默认的字体看不出来多大区别,当你用了非默认字体,区别就明显了。

还有个问题是字体本身问题,在css嵌入字体流行以前,比如你这个华康字体以及一些其他字体可能内部本身是点阵方式储存的字型,而且根本没考虑过未来嵌入web的问题,没做过 相关优化(这几年出现的中文字体也基本上没优化,中文字太多了,每个字都需要优化工作量太大),于是多数中文字体嵌入后会缺胳膊少腿(宋体系列相对好点),字上的一些线条特别发虚像丢了似的。

你看到的微软雅黑、苹果丽黑之类的字体效果好是这些少数字体是微软、苹果这种大企业花很高的成本设计,每个字都经过专门优化,充分考虑了系统和web等各种场景下的显示效果的。

总体来说,中文字体嵌入没有很好的解决方案,嵌入量大的问题到是可以程序解析字库删掉web中未出现的字来解决文件大小问题,但渲染不清晰、缺胳膊少腿这个问题根本就不是用户能搞定的。除非字体厂商花大价钱。