问题
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!
回答1:
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.
来源：https://stackoverflow.com/questions/18762795/easeljs-custom-font-lineheight-cross-browser-issues