CanvasRenderingContext2D:fontKerning 属性
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Canvas API 的 CanvasRenderingContext2D.fontKerning 属性用于指定如何使用字体字距调整(kerning)信息。
字距调整会调整比例字体的相邻字母间距,如果有空间,则允许它们在视觉上互相接触。例如,在良好的字距调整字体中,字符 AV、Ta 和 We 会更紧凑地排列,使得字符间距更加均匀,阅读起来比没有调整字距的文本更加舒服。
这个属性对应于 CSS 中的 font-kerning 属性。
值
该属性可以用来获取或设置值。
允许的取值包括:
示例
以下示例演示了使用 fontKerning 属性所支持的每一个值来显示文本“AVA Ta We”。
HTML
html
<canvas id="canvas" width="700" height="140"></canvas> JavaScript
js
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.font = "30px serif"; // 默认值(auto) ctx.fillText(`AVA Ta We(默认:${ctx.fontKerning})`, 5, 30); // 字距调整:normal ctx.fontKerning = "normal"; ctx.fillText(`AVA Ta We(${ctx.fontKerning})`, 5, 70); // 字距调整:none ctx.fontKerning = "none"; ctx.fillText(`AVA Ta We(${ctx.fontKerning})`, 5, 110); 结果
请注意,最后一个字符串禁用了字距调整,因此相邻字符的间距是均匀的。
规范
| Specification |
|---|
| HTML> # dom-context-2d-fontkerning> |