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

Question

我正在读一篇关于text-renderingCSS 的文章.

据该博客说:

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

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

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

• 什么是易读性？

• 任何人都可以请有所不同optimizeLegibility和optimizeSpeed？应该如何以及在何处使用它们？

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

Answer 1

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

我会说"渲染"大致等于接受应该是什么的指示并将其实现为有形的东西(在这种情况下,显示器上的像素).

在谈论网络浏览器时,"渲染" 包含的不仅仅是文本.渲染中涉及许多组件和阶段.

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

是什么呈现文字？

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

除了出色的文本定位,Internet Explorer 9还具有硬件加速文本.渲染文本和图形的工作已经从中央处理单元(CPU)推出到图形处理单元(GPU)上.这是使用DirectX系列的DirectWrite和Direct2D部分实现的 - 这使得Internet Explorer 9可以通过Windows使用底层硬件.

资源

这是大多数(所有？)浏览器中的一个共同主题:它们将文本渲染的最后阶段交给更接近设备本身的底层.

例如,Webkit使用GraphicContext抽象来与操作系统进行通信.(关于在WebKit中渲染的优秀演讲).每个OS可能具有不同的实现.WebKit的每个端口可能都不同.

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

易读性

什么是易读性？

"足够清晰阅读的质量"(来源)或" 易读性" 是指文本中的字形(个别字符)可根据外观理解或识别的程度." (来源)

这与以下描述一致optimizeLegibility:

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

换句话说,浏览器(通过渲染引擎)可以采取额外的步骤以便于更容易阅读和/或更加视觉上愉悦的方式显示文本.

它可以使用字体中包含的附加连字信息,并且可以调整字母之间的间距(字距调整).

差异

任何人都可以在optimizeLegibility和optimizeSpeed之间有所区别吗？

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

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

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

资源

应该如何以及在何处使用它们？

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

除了IE,每个浏览器都支持这个属性,所以81.0%的世界将使用它没有问题.

我认为这种说法可能过于乐观.此外,不要对Internet Explorer进行折扣,由于其紧密的硬件集成,它经常使文本呈现得非常好.