EaselJS自定义字体lineheight跨浏览器问题 [英] EaselJS custom font lineheight cross browser issues

问题描述

我认为这可能是一个问题，在使用Easel JS的不同浏览器中，行高，但没有办法来控制这与EaselJS据我所知。

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

你可以看到它只是Firefox导致的任何问题，在多个移动设备和平板设备，iOS和Android设备（Chrome浏览器，Safari和Android本机浏览器）上也可以正常显示（如Chrome，IE和Safari）

我有Firefox检测，并设置较低的X位置来平衡它，但我正在寻找一个解决方案，而不是一个解决方法！

---

编辑：我偶然发现这个为什么我的自定义字体在某些浏览器中有位置偏移但是当我在HTML中有文字，而不是由EaselJS在画布中渲染时，浏览器之间没有区别！

$ b $

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

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

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

I'm having a few issues with the positioning of text looking vastly different in different browsers with Easel JS when embedding a custom font.

I think it may be the line height, but there is no way to control this with EaselJS as far as I am aware.

I have tried changing the line-height as well as some other properties of the body in CSS and in the font-face declaration but had no success!

as you can see it is only Firefox causing any problems, It also appears correctly (like chrome, IE and Safari) on multiple mobile and tablet devices, iOS and Android, (Chrome, Safari and Android native browsers)

On a previous project I had Firefox detection and setting the x position lower to balance it out, but i'm looking for a solution not a workaround!

---

EDIT: I stumbled across this Why does my custom font have a positional offset in some browsers?

But when I have text in the html, not rendered by EaselJS in canvas, there is no difference between browsers!

解决方案

The following font attributes are available on the drawing context (canvas):

• font can be anything you would put in a CSS font rule. That includes font style, font variant, font weight, font size, line height, and font family.
• textAlign controls text alignment. It is similar (but not identical) to a CSS text-align rule. Possible values are start, end, left, right, and center.
• textBaseline controls where the text is drawn relative to the starting point. Possible values are top, hanging, middle, alphabetic, ideographic, or bottom.

When drawing to the canvas set the textBaseline explicitly (js):

context.textBaseline = "alphabetic";

http://diveintohtml5.info/canvas.html

Did you try the text-rendering declaration? (css)

text-rendering: geometricPrecision;

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

Disclaimer: These are just wild guesses since you didn't supply any code.

这篇关于EaselJS自定义字体lineheight跨浏览器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！