- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在阅读 article关于 text-rendering
in css.
根据该博客:
The
text-rendering
property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen. It provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision.
它现在对于优化目的也很有用,可以减少页面加载时间,正如那里提到的那样。但是在阅读那篇文章时有些术语让我感到困惑,我认为这里的专家会详细说明这些术语以便更好地理解。所以这里是那些条款:
渲染是什么意思?它是如何完成的(关于 CSS)?
什么是易读性?
有人可以区分 optimizeLegibility
和 optimizeSpeed
吗?应该如何以及在何处使用它们中的每一个或两者?
此外,除了 IE,每个浏览器都支持此属性,所以很简单 81.0%的世界将没有问题使用它。这就是为什么我问这个问题是为了澄清对这些概念的理解。
最佳答案
What is meant by rendering? how it is done (with regard to CSS)?
我会说“渲染”大致等于接受关于应该是什么的指令并将其具体化为有形的东西(在这种情况下,显示器上的像素)。
“渲染”encompasses much more than text在谈论网络浏览器时。渲染涉及许多组件和阶段。
文本渲染会影响布局(宽度、高度、换行等)并影响绘制(“绘制这些像素和/或此字符串”)。
这是来自 IE 团队的一段有趣的引述,解释了在 IE9+ 中该过程是如何完成的:
In addition to superior text positioning, Internet Explorer 9 also features hardware-accelerated text. The job of rendering both text and graphics has been pushed off of the central processing unit (CPU) and onto the graphics processing unit (GPU). This is accomplished using both DirectWrite and Direct2D—part of the DirectX families of APIs—which enable Internet Explorer 9 to use the underlying hardware through Windows.
这是大多数(所有?)浏览器的共同主题:它们将文本渲染的最后阶段移交给更靠近设备本身的底层。
例如,Webkit 使用 GraphicContext
与操作系统对话的抽象。 (Excellent talk on rendering in WebKit)。每个操作系统可能有不同的实现。 And each port of WebKit may be different .
这并不意味着渲染引擎无法为其下方的层提供详细的提示/说明。这确实意味着结果会因硬件、操作系统、浏览器和字体而异。
What is Legibility?
“清晰易读的质量”( Source ) 或“易读性是文本中的字形(单个字符)根据外观可理解或可识别的程度。” ( Source )
这与 optimizeLegibility
的描述一致:
The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
换句话说,浏览器(通过渲染引擎)可能会采取额外的步骤以更易于阅读和/或更美观的方式显示文本。
它可能会使用额外的 ligature字体中包含的信息,它可能会调整字母之间的间距 ( kerning )。
Can anyone please differ in between optimizeLegibility and optimizeSpeed?
质量(易读性)与数量(速度,即在给定时间段内呈现的字符数)。
optimizeSpeed: The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
optimizeLegibility: The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
How and where each of them or both should be used?
只应使用其中一个(如果有的话)。就个人而言,我只会指定 text-rendering
在看到它产生了积极影响之后,并且在所有设备上都表现良好(这是一项艰巨的任务)。
Also except IE every browser supports this property, So Simply 81.0% of world will have no problem using it.
我认为这种说法可能过于乐观了。另外,不要低估 Internet Explorer,由于其紧密的硬件集成,它通常可以非常好地呈现文本。
关于html - css 中的文本渲染,它是什么?以及如何使用它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24838530/
在我的 OpenGL 程序中,我按顺序执行以下操作: // Drawing filled polyhedrons // Drawing points using GL_POINTS // Displa
我想传递一个包含原始页面的局部变量,这个变量只包含一个带有值的符号。 当我使用此代码时,它运行良好,可以在部分中访问 origin 变量: render :partial => "products",
为什么这个 HTML/脚本(来自“JavaScript Ninja 的 secret ”)不渲染? http://jsfiddle.net/BCL54/
我想在阅读完 View 后返回到特定的网页位置(跳转到页内 anchor )。换句话说,在 views.py 中,我想做类似的事情: context={'form':my_form} return r
我有一个包含单条折线的 PathGeometry,并以固定的间隔向该线添加一个新点(以绘制波形)。使用 Perforator 工具时,我可以看到每次向直线添加一个点时,WPF 都会将整个 PathGe
尝试了解如何消除或最小化网站上不同 JavaScript 库的渲染延迟。 例如,如果我想加载来自许多社交网络的“即时”关注按钮,它们似乎会相互阻止渲染,并且您会收到令人不快的弹出窗口。 (func
我有以 xyz 点格式表示 3D 表面(即地震断层平面)的数据。我想创建这些表面的 3D 表示。我使用 rgl 和 akima 取得了一些成功,但是它无法真正处理可能会自行折叠或在同一 x,y 点具有
我正在用 Libgdx 编写一个小游戏。 我有一个 Render[OpenGL] 线程,它不断对所有对象调用 render() 和一个更新线程不断对所有对象调用 update(double delta
我有一个 .Rmd 文件包含: ```{r, echo=FALSE, message=FALSE, results='asis'} library(xtable) print(xtable(group
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
请不要评判我,我只是在学习 Swift。 最近我安装了 MetalPetal 框架,并按照说明操作: https://github.com/MetalPetal/MetalPetal#example-
如果您尝试渲染 Canvas 宽度和高度之外的图像,计算机是否仍会尝试渲染它并使用资源来尝试渲染它?我只是想找出在尝试渲染图像之前检查图像是否在 Canvas 内是否更好。 最佳答案 我相信它仍然在无
我在 safari 中渲染时遇到问题。 在 firefox、chrome 和 IE 上。如下图所示: input.searchbox{-webkit-border-radius:10px;-moz-b
我正在尝试通过远程桌面在 Windows7 下运行我在 RHEL7 服务器中制作的 java 程序。 服务器中的所有java程序都无法通过远程桌面呈现。如果我在服务器位置访问服务器本身,它们看起来没问
我正处于一个新项目的设计阶段,该项目将采用数据集并将其加载到文档中,然后围绕模板呈现文档。呈现的文件可以是 CSV 数据集、PDF 营销信函、电子邮件……很多东西。数据不会是数学方程式,我只是在寻找一
有没有办法在不同的 div 下渲染 React 组件的子组件? ... ... ... ... ...
使用以下代码: import numpy as np from plotly.offline import iplot, init_notebook_mode import plotly.graph_
截至最近, meteor 的所有文档都指出 onRendered是一种在模板完成渲染时获取回调的新方法。和 rendered只是为了向后兼容。 但是,这似乎对我不起作用。 onRendered永远不会
所以在我的基本模板中,我有:{% render "EcsCrmBundle:Module:checkClock" %} 然后我创建了 ModuleController.php ... getDoctr
我正在使用 vue-mathjax 来编译我的 vue 项目中的数学方程。它正在编译第一个括号 () 之间的文本。我想防止编译括号内的字符串。在文档中我发现,对于$符号,如果我们想逃避编译,我们需要使
我是一名优秀的程序员,十分优秀!