1、-webkit-font-smoothing控制的字体渲染只对MacOS的webkit有效。所以,你在MacOS测试环境下面设置-webkit-font-smoothing时,只要你不把它设置为none,怎么好看就设置为什么属性,反正这个属性仅仅是面向MacOS,不会在其他上下文中出岔子的(除了none的情形)。

2、前端控制字体渲染的接口非常匮乏,如果可能,尽可能的控制输出的字体,而非控制字体渲染。

3、以下测试则会表明,-webkit-font-smoothing在MacOS上才有效果。

① Windows

测试环境:Win7 Pro + Chrome:

结论:Windows系统上-webkit-font-smoothing属性不造成区别。

② ios

测试环境:iPad Air  +  ios7  + Safari

(ios上没有Hiragino Sans GB,不要被标签误导了!)

结论:ios上,修改-webkit-font-smoothing属性,结果是:

  · -webkit-font-smoothing:none;  无抗锯齿

  · -webkit-font-smoothing:antialiased  |  subpixel-antianliased  | default;  灰度平滑

③ MacOS

测试环境:MBP  + Safari:

结论:ios上,修改-webkit-font-smoothing属性,结果是:

  · -webkit-font-smoothing:none;  无抗锯齿

  · -webkit-font-smoothing:subpixel-antialiased  |  default;  次像素平滑

  · -webkit-font-smoothing:antialiased;  灰度平滑

4、字体抗锯齿技术

  字体抗锯齿技术可以分为如下几类:

  · 黑白渲染:现在已经绝迹

  ·灰度渲染:常用语Android和ios等移动设备

  ·次像素平滑:常见于Mac OS 和 MacType For Windows

  ·ClearType:黑白渲染和次像素平滑的折中。WinXP内置,默认关闭;win7以上默认打开

  理想形状:黑白渲染;灰度渲染。

  次像素平滑技术原理,从右往左看,注意到一个pixel里的渐变。

5、从不同平台浏览器字体渲染对比附的图可见端倪:

6、以下表格是我综合多方资料的结果,欢迎纠错:

来源:https://segmentfault.com/q/1010000000467910/a-1020000000468107

字体渲染技术(字体抗锯齿技术) -webkit-font-smoothing: antialiased;的更多相关文章

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

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

  2. 回击MLAA:NVIDIA FXAA抗锯齿性能实測、画质对照

    PC游戏玩家肯定会对各式各样的AA抗锯齿技术很熟悉,而今天本文的主角就是NVIDIA今年才推出的新型抗锯齿技术"FXAA". FXAA在某种程度上有些类似于AMD之前宣传的MLAA ...

  3. Unity3D学习(七):Unity多重采样抗锯齿设置无效的解决办法

    前言 学习Shader的过程中发现模型锯齿严重,于是去Edit--Project Settings--Quality选项下将反锯齿设置为了8X Multi Sampling.结果没有任何改变,如图: ...

  4. SSE图像算法优化系列二十四: 基于形态学的图像后期抗锯齿算法--MLAA优化研究。

    偶尔看到这样的一个算法,觉得还是蛮有意思的,花了将近10天多的时间研究了下相关代码. 以下为百度的结果:MLAA全称Morphological Antialiasing,意为形态抗锯齿是AMD推出的完 ...

  5. CSS3属性-webkit-font-smoothing字体抗锯齿渲染

    对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服.在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多. font-smoothing是非标准的CSS定义.它被列入标准规范的草案中,后由于某些原因从 ...

  6. Linux 下 netbeans 字体抗锯齿正解

    转自:http://leenjewel.blog.163.com/blog/static/601937922010124444051/ 说来这个不难,主要是我看网上有的写的不是很明确,甚至有的写的根本 ...

  7. CSS3中设置字体的抗锯齿或光滑度的属性

    刚刚接触前端开发,对于-webkit-font-smoothing: antialiased; 这个属性不了解.上网查找了一些资料. 总结一下: -webkit-font-smoothing  :  ...

  8. Cufon在渲染网页字体你不知道的事

    清单 1. 无效的 font-family 字体指定 <style> .introduction { font-family:'Baroque Script';} </style&g ...

  9. Qt 2D绘图之二:抗锯齿渲染和坐标系统

    一.抗锯齿渲染 1.1 逻辑绘图 图形基元的大小(宽度和高度)始终与其数学模型相对应,下图示意了忽略其渲染时使用的画笔的宽度的样子. 1.2 物理绘图(默认情况) 在默认的情况下,绘制会产生锯齿,并且 ...

随机推荐

  1. linux下的时间管理概述

    2017/6/21 时间这一概念在生活中至关重要,而在操作系统中也同样重要,其在系统中的功能绝不仅仅是给用户提供时间这么简单,内核的许多机制都依赖于时间子系统.但凡是要在某个精确的时间执行某个事件,必 ...

  2. java中的静态分派和动态分派

    多态是java的基本特征之一,多态即一个对象具有多种形态(多种表达形式,猴子是动物的一种的表现形式),例如:子类是父类的一种形态. 当方法重载时,就会涉及到多态. 1:在重载时是通过参数的静态类型,而 ...

  3. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. STL: fill,fill_n,generate,generate_n

    fill Assigns the same new value to every element in a specified range. template<class ForwardIter ...

  5. [React-Native]入门(Hello World)

    (1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦. (2)在Mac上安装Xcode,建议Xcode 6.3以上版本 (3)安装node.js:https://nodejs.org/dow ...

  6. 斩获新知——记一次reverse的实现过程

    最近学习C++,在实现reverse模板函数的时候,从一个小问题开始,在对这个问题的旁敲侧击当中带起了更多疑惑,顺藤摸瓜之后,尽管没有将诸多问题完美解答,但整个过程下来却也似有所获.最初的问题从使用C ...

  7. PKU 1321 棋盘问题(搜索+剪枝)

    #include<iostream> #include<cstring> using namespace std; ],ans; ][]; void dfs(int i) { ...

  8. 记一次ZOOKEEPER集群超时问题分析

    CDH安装的ZK,三个节点,基本都是默认配置,一直用得正常,今天出现问题,客户端连接超时6倍时长,默认最大会话超时时间是一分钟.原因分析:1.首先要确认网络正确.确认时钟同步.2.查看现有的配置,基本 ...

  9. Java GC随笔

    最近发生了一些C#程序运行时的一些问题,发现是GC导致的问题,然后稍微研究了一下GC,因为知道Java的GC要比.NET稍微复杂一点,所以我觉得要是能弄懂Java的GC的原理,对.NET的GC的理解也 ...

  10. 【c++ primer, 5e】定义类相关的非成员函数

    练习 7.6 & 7.7 #include <iostream> #include <string> using namespace std; // Sales_dat ...