text-rendering 详解
原文链接：http://www.feeldesignstudio.com/2013/05/text-rendering
Text-rendering 属性是一个非标准属性，主要用来告诉渲染引擎（rendering engine）渲染文字的时候如何来优化，浏览器根据这个属性来权衡速度、易读性、几何精度等方面。
暂时只有Gecko（Firefox）and WebKit（Safari 或 Chrome）支持这个属性。
注：
Gecko是套开放原始码的、以C++编写的网页排版引擎。目前为Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。
现在浏览器的内核引擎，基本上是四分天下：
Trident: IE 以Trident 作为内核引擎;
Gecko: Firefox 是基于 Gecko 开发;
WebKit: Safari, Google Chrome,傲游3 基于 Webkit 开发。
Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini
Text-rendering属性有如下取值：
|
取值 |
描述 |
|
auto |
浏览器为速度、易读性、几何精度等自动优化来绘制文本
在实践中，Gecko桌面浏览器（Firefox）如果字体大小为20 px或者更大，会使用optimizeLegibility；否则对于较小的文本使用optimizeSpeed |
|
optimizeSpeed |
绘制文本时速度优先，会禁用字距调整和连字 |
|
optimizeLegibility |
绘制文本时易读性优先，会启用字距调整和连字 |
|
geometricPrecision |
绘制文本时几何精度优先，暂时和optimizeLegibility相同 |
明显的效果是optimizeLegibility 在文字较小（20px以下）的时候，在一些特殊字体设定下（如Microsoft’s Calibri、Candara等）启用了连字（比如 ff、fi、fl）
下面是一些例子：
XHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-rendering</title>
<style>
body {
text-rendering:auto;
}
p {
margin:20px0;
font-size:30px;
}
p.auto {
text-rendering:auto;
}
p.optimizeSpeed {
text-rendering:optimizeSpeed;
}
p.optimizeLegibility {
text-rendering:optimizeLegibility;
}
p.geometricPrecision {
text-rendering:geometricPrecision;
}
</style>
</head>
<body>
<p class="auto">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="optimizeSpeed">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="optimizeLegibility">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
<p class="geometricPrecision">Welcome to Feeldesign Studio <br>ligatures: ff, fi, fl, ffl</p>
</body>
</html>
注意下面的图片中顺序是:
- text-rendering: auto;
- text-rendering: optimizeSpeed;
- text-rendering: optimizeLegibility;
- text-rendering: geometricPrecision;
Chrome：
Firefox：
换个字体，小于20px：
CSS
p {
font:19px'DejaVu Serif',Constantia;
}
Chrome：
Firefox：
换个字体，大于20px：
CSS
|
1
2
3
|
p {
font:30px'DejaVu Serif',Constantia;
}
|
Chrome：
Firefox：
可以比较明显的看出，不同的text-rendering属性在Chrome下的区别比较明显，在Firefox下基本上没有区别。
text-rendering 详解的更多相关文章
- phaser学习总结之Text对象详解
前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...
- jquery之html(),text()方法详解
一:html() html()函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容. 该函数的用途相当于设置或获取DOM元素的innerHTML属性值. 该函数属于jQuery对象 ...
- Flutter Container 组件、Text 组件详解
Text 组件 textAlign 文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection 文本方向(ltr 从左至右 ...
- UITextView的使用详解
//初始化并定义大小 UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)]; te ...
- 【转】UITextView的使用详解
//初始化并定义大小 UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)]; te ...
- java爬取网页内容 简单例子（2）——附jsoup的select用法详解
[背景] 在上一篇博文java爬取网页内容 简单例子(1)——使用正则表达式 里面,介绍了如何使用正则表达式去解析网页的内容,虽然该正则表达式比较通用,但繁琐,代码量多,现实中想要想出一条简单的正则表 ...
- SUBLIME TEXT 2 设置文件详解
SUBLIME TEXT 2 设置文件详解 Preferences.sublime-settings文件: // While you can edit this file, it’s best to ...
- Sublime Text 设置文件详解
Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自 ...
- sublime text 3 build 3143 安装详解
sublime text 3 build 3143 安装详解 环境:ubuntu 16 (x64) 0x00 下载 官网下载地址 下载的文件是个压缩包,笔者解压之后将整个sublime-t ...
- 全网最详细的Sublime Text 3的安装Package Control插件管理包（图文详解）
不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...
随机推荐
- 用jQuery之后，之前javascript的一些方法就不能用了吗
用jQuery之后,之前javascript的一些方法就不能用了吗? 比如$("#btn").onclick = function(){}这种用法?或者$("#btn&q ...
- Mac 下用 go 开发Android应用环境设置
需要的工具 设置代理 请参考:http://www.cnblogs.com/ghj1976/p/5087049.html Mac 下命令行设置代理: export http_proxy=http:// ...
- 有向无环图（DAG）的最小路径覆盖（转）
DAG的最小路径覆盖 定义:在一个有向图中,找出最少的路径,使得这些路径经过了所有的点. 最小路径覆盖分为最小不相交路径覆盖和最小可相交路径覆盖. 最小不相交路径覆盖:每一条路径经过的顶点各不相同.如 ...
- NYOJ 47-过河问题
点击打开链接 过河问题 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不 ...
- WPF更新数据源
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windo ...
- Java String 的实例(02)
1.初始化数组以及数组的拷贝 int[] a={1,2,3,4}; //System.out.println(Arrays.toString(a)); a=new int[ ...
- MySQL数据的主从复制、半同步复制和主主复制详解-转
一.MySQL复制概述 ⑴.MySQL数据的复制的基本介绍 目前MySQL数据库已经占去数据库市场上很大的份额,其一是由于MySQL数据的开源性和高性能,当然还有重要的一条就是免费~不过不知道还能免费 ...
- Centos安装软件小结-20160325
三种安装包 bin包 rpm包 源码包 1.bin包 1.先赋予权限: chmod 777 *.bin 2.开始安装: ./.bin 2.rpm包(以jdk为例)\ yum search jdk\ y ...
- 用imageNamed加载图片产生的问题
通常我们会用imageNamed:来加载图片,但是用这个API有个问题,就是它会缓存加载的image. 因此,对于那些被重用的图片,这个API很高效.但是对于那些使用很少的图片,用这个就很耗内存,那怎 ...
- css3实现小米商城鼠标移动图片上浮阴影效果
今天在编程爱好者编码库看见一个好玩的程序,代码如下. <!DOCTYPE html> <html> <head> <meta charset=&quo ...