From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/text-rendering/index.html | 211 ++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 files/zh-cn/web/css/text-rendering/index.html (limited to 'files/zh-cn/web/css/text-rendering') diff --git a/files/zh-cn/web/css/text-rendering/index.html b/files/zh-cn/web/css/text-rendering/index.html new file mode 100644 index 0000000000..1b48fa93f9 --- /dev/null +++ b/files/zh-cn/web/css/text-rendering/index.html @@ -0,0 +1,211 @@ +--- +title: 文本渲染 +slug: Web/CSS/text-rendering +tags: + - CSS + - SVG + - zh-CN +translation_of: Web/CSS/text-rendering +--- +

{{ CSSRef() }}

+ +

概述

+ +

text-rendering CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

+ +
+

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

+
+ +

一个视觉上很明显的效果是，optimizeLegibility 属性值会在某些字体（比如，微软的 Calibri，Candara，Constantia 和 Corbel 或者 DejaVu 系列字体）小于20px 时把有些相邻字符连接起来（ligatures，比如，ff、fi、fl 等，效果见下面的 LiveExample) 。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Global values */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+
+ +

值

+ +
+
auto
+
浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。
+
optimizeSpeed
+
浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。
+
optimizeLegibility
+
浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题，详细查看 text-rendering。
+
geometricPrecision
+
+

浏览器在绘制文本时将着重考虑几何精度， 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

+ +

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

+ +

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

+ +

提示: WebKit 准确地的实现了这个值, 但是 Gecko 把这个值按照 optimizeLegibility 处理。

+
+
+ +

示例

+ +
/* make sure all fonts in the HTML document display in all its glory,
+   but avoid inadequate ligatures in class foo elements */
+
+body  { text-rendering: optimizeLegibility; }
+.foo  { text-rendering: optimizeSpeed; }
+ +

Live Example

+ +
+

没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 text-rendering。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS codeKerningLigatures
font: 19.9px 'DejaVu Serif',Constantia;LYoWATff fi fl ffl
font: 20px 'DejaVu Serif',Constantia;LYoWATff fi fl ffl
font: 3em 'DejaVu Serif',Constantia;
+ text-rendering: optimizeSpeed;		LYoWATff fi fl ffl
font: 3em 'Dejavu Serif',Constantia;
+ text-rendering: optimizeLegibility;		LYoWATff fi fl ffl
+ +

Gecko 注释

+ +

auto 选项的 20px 字体大小的阈值可以被 browser.display.auto_quality_min_font_size 值改变.

+ +

optimizeSpeed 选项在 Gecko 2.0 {{ geckoRelease("2.0") }} 上已经没有效果了，因为标准的文字渲染代码已经非常快，而且目前还没有更快的渲染方法。详见 {{ bug(595688) }} .

+ +

说明文档

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}{{ Spec2('SVG1.1') }} 
+ +
+

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support for Windows and Linux +

4.0 but the implementation known bugs on Windows and Linux which can break font substitition, small-caps, letter-spacing or cause text to overlap

+ 		3.0 (1.9){{ CompatNo() }}{{ CompatNo() }}5.0 (532.5)
Basic support for other operating systems{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
autoChrome treats this as optimizeSpeed.
+ Work is continuing on{{ Webkitbug("41363") }}		If the font size is 20 px or higher, Gecko browsers use optimizeLegibility; for smaller text, they use optimizeSpeed.{{ CompatNo() }}{{ CompatNo() }}Safari treats this as optimizeSpeed.
+ Work is continuing on{{ Webkitbug("41363") }}
geometricPrecision13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.
+ Introduced in WebKit 535.1   {{ Webkitbug("60317") }}		Gecko treats the value the same as optimizeLegibility. {{ CompatNo() }} {{ CompatNo() }} 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
-- cgit v1.2.3-54-g00ecf