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

Question

在嵌入自定义字体时，我在使用 Easel JS 的不同浏览器中的文本定位看起来大不相同时遇到了一些问题。

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

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

如您所见，只有 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在canvas中渲染的时候，浏览器之间就没有区别了！

Answer 1

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

• font 可以是任何你想放在 CSS 字体规则中的东西。这包括字体样式、字体变体、字体粗细、字体大小、行高和字体系列。
• textAlign 控制文本对齐方式。它与 CSS 文本对齐规则相似（但不相同）。可能的值是 start、end、left、right 和 center。
• textBaseline 控制相对于起点绘制文本的位置。可能的值是顶部、悬挂、中间、字母、表意或底部。

在画布上绘制时明确设置 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

免责声明：这些只是猜测，因为您没有提供任何代码。