在CSS中进行文本渲染,它是什么?以及如何使用它?

时间:2014-07-19 08:49:49

标签: html css

我正在css中的text-rendering上阅读article

根据该博客:

  

CSS中的text-rendering属性允许您选择质量   文本超速(反之亦然)允许您微调优化   通过向浏览器建议它应该如何呈现文本   屏幕。它向渲染引擎提供有关内容的信息   在渲染文本时进行优化。浏览器之间进行权衡   速度,易读性和几何精度。

此外,它还可用于优化目的,以减少页面加载时间,如此处所述。 但是有些术语在阅读那篇文章时让我很困惑,我认为这里的专家会详细说明这些术语以便更好地理解。以下是这些术语:

  • 渲染是什么意思?怎么做(关于CSS)?

  • 什么是易读性?

  • 任何人都可以在optimizeLegibilityoptimizeSpeed之间有所区别吗?应该如何以及在何处使用它们?

除了IE之外,每个浏览器都支持这个属性,所以简单地81.0%世界将使用它没有问题。这就是为什么我要问这个问题,以便清楚理解这些概念。

1 个答案:

答案 0 :(得分:10)

  

渲染是什么意思?它是如何完成的(关于CSS)?

我说"渲染"大致等于接受关于的内容的指示并将其具体化为有形的东西(在这种情况下,显示器上的像素)。

"渲染"在谈论网络浏览器时encompasses much more than text。渲染中涉及许多组件和阶段。

文字渲染会影响布局(宽度,高度,换行等)并影响绘画("绘制这些像素和/或此字符串")。

什么呈现文本?

以下是来自IE团队的有趣引用,解释了如何在IE9 +中完成该过程:

  

除了出色的文本定位外,Internet Explorer 9还可以   具有硬件加速文本。渲染文本和文本的工作   图形已被推离中央处理单元(CPU)和   到图形处理单元(GPU)上。这是使用完成的   DirectX系列的DirectWrite和Direct2D都是   API - 使Internet Explorer 9能够使用底层硬件   通过Windows。

Source

这是大多数(所有?)浏览器的常见主题:它们将文本渲染的最后阶段交给更接近设备本身的底层。

例如,Webkit使用GraphicContext抽象来与操作系统进行通信。 (Excellent talk on rendering in WebKit)。每个OS可能具有不同的实现。 And each port of WebKit may be different

这并不意味着渲染引擎无法向其下方的层提供详细的提示/指令。 意味着结果会因硬件,操作系统,浏览器和字体而异。

易读性

  

什么是易读性?

"足够清晰的阅读质量" (Source)或"易读性是文本中的字形(单个字符)基于外观可理解或可识别的程度。" (Source

这与optimizeLegibility

的描述一致
  

浏览器强调了渲染速度和几何的易读性   精确。这样可以进行字距调整和可选的连字。

换句话说,浏览器(通过渲染引擎)可以采取额外的步骤,以更容易阅读和/或更直观的方式显示文本。

它可能会使用字体中包含的其他ligature信息,并且可能会调整字母之间的间距(kerning)。

的差异

  

任何人都可以在optimizeLegibility和   optimizeSpeed?

质量(易读性)与数量(速度,即在给定时间段内呈现的字符数)。

  

optimizeSpeed:在绘制文本时,浏览器强调渲染速度超过易读性和几何精度。它禁用字距调整和   连字。

     

optimizeLegibility:浏览器强调了渲染速度和几何精度的可读性。这使得字距调整和可选   连字。

Source

  

应该如何以及在何处使用它们或两者?

只应使用其中一个(如果有的话)。就个人而言,我只会在看到在所有设备上表现良好(这是一项艰巨的任务)之后才指定text-rendering

  

除IE外,每个浏览器都支持此属性,所以只需81.0%   世界将使用它没有问题。

我认为这种说法可能过于乐观。此外,不要对Internet Explorer进行折扣,因为它的硬件集成非常紧密,因此通常可以很好地呈现文本。