HTML5 MeasureText() 및 FillText() 일관성있는 교차 브라우저를 만들려면 어떻게합니까

Question

http://jsfiddle.net/qcVAV/에서 볼 수있는 HTML5 Canvas로 일부 텍스트 렌더링에 문제가 있습니다.

파이어 폭스와 인터넷 익스플로러는 텍스트를 측정하여 일관되게 채우지 만 크롬은 그렇지 않습니다.

제공된 링크에서 Internet Explorer와 Firefox가 동일하게 표시되고 measureText 호출에서 제공된 텍스트가 1679로 측정된다는 것을 알 수 있습니다. Firefox에서는 추가 정밀도가 있습니다. 그러나 Chrome의 경우 텍스트 측정 값은 1651입니다.

CSS 리셋 http://cssreset.com을 추가하려고했는데 CSS가 문제를 일으킬 수 있다고 생각했습니다.

텍스트가 일관되게 렌더링되게하려면 어떻게해야합니까?

Answer 1

죄송합니다, 여기서 운이 좋았습니다.

텍스트는 브라우저마다 다르게 측정 될뿐만 아니라 비늘과 렌더링도 크게 다릅니다. 글꼴 크기에 4를 곱하고 배율을 4로 변경하면 결과가 놀랄 수 있습니다. 일부 브라우저에서는 커닝 (Kerning)이 해제되고 스케일은 전혀 적용될 때 오페라가 끔찍해 보입니다.

measureText을 일관성있게 만드는 유일한 방법은 사전 계산하는 것입니다.

fillText을 일관되게 만드는 유일한 방법은 텍스트 대신 이미지를 사용하는 것입니다. It's must faster, anyway.

텍스트가 매우 동적 인 경우 두 가지 모두 허용되지 않지만 앱에 100 가지 미만의 텍스트 만 쓰는 경우 이미지가 가장 좋은 방법 일 수 있습니다.