我正在css中的text-rendering
上阅读article。
根据该博客:
CSS中的
text-rendering
属性允许您选择质量 文本超速(反之亦然)允许您微调优化 通过向浏览器建议它应该如何呈现文本 屏幕。它向渲染引擎提供有关内容的信息 在渲染文本时进行优化。浏览器之间进行权衡 速度,易读性和几何精度。
此外,它还可用于优化目的,以减少页面加载时间,如此处所述。 但是有些术语在阅读那篇文章时让我很困惑,我认为这里的专家会详细说明这些术语以便更好地理解。以下是这些术语:
渲染是什么意思?怎么做(关于CSS)?
什么是易读性?
任何人都可以在optimizeLegibility
和optimizeSpeed
之间有所区别吗?应该如何以及在何处使用它们?
除了IE之外,每个浏览器都支持这个属性,所以简单地81.0%世界将使用它没有问题。这就是为什么我要问这个问题,以便清楚理解这些概念。
答案 0 :(得分:10)
渲染是什么意思?它是如何完成的(关于CSS)?
我说"渲染"大致等于接受关于应的内容的指示并将其具体化为有形的东西(在这种情况下,显示器上的像素)。
"渲染"在谈论网络浏览器时encompasses much more than text。渲染中涉及许多组件和阶段。
文字渲染会影响布局(宽度,高度,换行等)并影响绘画("绘制这些像素和/或此字符串")。
以下是来自IE团队的有趣引用,解释了如何在IE9 +中完成该过程:
除了出色的文本定位外,Internet Explorer 9还可以 具有硬件加速文本。渲染文本和文本的工作 图形已被推离中央处理单元(CPU)和 到图形处理单元(GPU)上。这是使用完成的 DirectX系列的DirectWrite和Direct2D都是 API - 使Internet Explorer 9能够使用底层硬件 通过Windows。
这是大多数(所有?)浏览器的常见主题:它们将文本渲染的最后阶段交给更接近设备本身的底层。
例如,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:浏览器强调了渲染速度和几何精度的可读性。这使得字距调整和可选 连字。
应该如何以及在何处使用它们或两者?
只应使用其中一个(如果有的话)。就个人而言,我只会在看到和在所有设备上表现良好(这是一项艰巨的任务)之后才指定text-rendering
。
除IE外,每个浏览器都支持此属性,所以只需81.0% 世界将使用它没有问题。
我认为这种说法可能过于乐观。此外,不要对Internet Explorer进行折扣,因为它的硬件集成非常紧密,因此通常可以很好地呈现文本。