TextMetrics

在 canvas 中,TextMetrics 接口表示文本的尺寸,通过 CanvasRenderingContext2D.measureText() 方法创建。

属性

TextMetrics.width 只读
double 类型,使用 CSS 像素计算的内联字符串的宽度。基于当前上下文字体考虑。
TextMetrics.actualBoundingBoxLeft 只读
double 类型,平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离,使用 CSS 像素计算。
TextMetrics.actualBoundingBoxRight 只读
double 类型,平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离,使用 CSS 像素计算。
TextMetrics.fontBoundingBoxAscent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离,使用 CSS 像素计算。
TextMetrics.fontBoundingBoxDescent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离,使用 CSS 像素计算。
TextMetrics.actualBoundingBoxAscent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离,使用 CSS 像素计算。
TextMetrics.actualBoundingBoxDescent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离,使用 CSS 像素计算。
TextMetrics.emHeightAscent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离,使用 CSS 像素计算。
TextMetrics.emHeightDescent 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离,使用 CSS 像素计算。
TextMetrics.hangingBaseline 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离,使用 CSS 像素计算。
TextMetrics.alphabeticBaseline 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离,使用 CSS 像素计算。
TextMetrics.ideographicBaseline 只读
double 类型,从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离,使用 CSS 像素计算。

规范描述

Specification Status Comment
HTML Living Standard
TextMetrics
Living Standard Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
TextMetricsChrome Full support 4Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 31Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
actualBoundingBoxAscent
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
actualBoundingBoxDescent
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
actualBoundingBoxLeft
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
actualBoundingBoxRight
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
alphabeticBaseline
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
emHeightAscent
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
emHeightDescent
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
fontBoundingBoxAscent
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
fontBoundingBoxDescent
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS No support NoSamsung Internet Android ?
hangingBaseline
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
ideographicBaseline
Experimental
Chrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
IE No support NoOpera ? Safari Full support YesWebView Android No support NoChrome Android Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes Firefox does not implement this feature yet. See the related bug 1102584.
Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
width
Experimental
Chrome Full support 4Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 31Opera Android Full support YesSafari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参见