3

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

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

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

字体

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

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

编辑：我偶然发现了为什么我的自定义字体在某些浏览器中有位置偏移？

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

4

1 回答 1

6

以下字体属性在绘图上下文（画布）上可用：

  • 字体可以是任何你想放在 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

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

于 2013-09-19T07:10:21.527 回答