EaselJS自定义字体lineheight跨浏览器问题

Question

在嵌入自定义字体时，我在使用Easel JS在不同浏览器中查找文本的位置存在一些问题。

我认为它可能是行高，但据我所知，没有办法用EaselJS来控制它。

我尝试在CSS和font-face声明中更改line-height以及正文的其他一些属性，但没有成功！

正如您所看到的，只有Firefox导致任何问题，它在多个移动和平板电脑设备，iOS和Android，（Chrome，Safari和Android原生浏览器）上也正确显示（如chrome，IE和Safari）

在之前的项目中，我进行了Firefox检测并将x位置设置得较低以平衡它，但我正在寻找解决方案而不是解决方法！

---

编辑：我偶然发现了Why does my custom font have a positional offset in some browsers?

但是当我在html中有文本，而不是画布中的EaselJS渲染时，浏览器之间没有区别！

Answer 1

绘图上下文（画布）上提供了以下字体属性：

• 字体可以是您在CSS字体规则中放置的任何内容。这包括字体样式，字体变体，字体粗细，字体大小，行高和字体系列。
• textAlign控制文本对齐方式。它与CSS文本对齐规则类似（但不完全相同）。可能的值包括开始，结束，左，右和中心。
• textBaseline控制相对于起点绘制文本的位置。可能的值包括top，hanging，middle，alphabetic，ideographic或bottom。

绘制到画布时，显式设置textBaseline（js）：

context.textBaseline = "alphabetic";

http://diveintohtml5.info/canvas.html

您是否尝试过文字渲染声明？ （CSS）

text-rendering: geometricPrecision;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

免责声明：由于您没有提供任何代码，因此这些只是猜测错误。