임의의 문자가있는 <canvas>의 크롬 렌더링 SVG 글꼴

저는 html5 캔버스로 약간의 작업을하고 CSS @ font-face를 통해 SVG 글꼴을 사용하여 텍스트를 렌더링하고 싶습니다. 불행하게도 Chrome은 SVG 글꼴을 캔버스에 랜덤 한 이상한 문자로 렌더링합니다. 다른 글꼴 유형을 사용하면 앤티 앨리어스가 매우 낮기 때문에 실제로 옵션이 아닙니다.임의의 문자가있는 <canvas>의 크롬 렌더링 SVG 글꼴

var context = $('canvas')[0].getContext("2d"); 

context.fillStyle = '#333333'; 
context.font = "20px Chela_One"; 
context.textBaseline = 'top'; 
context.textAlign = 'left'; 
context.fillText('Sample Text', 0, 0);

나는이 입증하는 바이올린 만든 : 캔버스 SVG 글꼴이 잘 작동 http://jsfiddle.net/9t6Kf/7/ 사파리에

(도 웹킷을). 크롬 같다. 이 이상한 일에 대해 아는 사람이 있습니까?

텍스트가 정상 보이는 경우

편집, 다시 폰트를로드 한하지 않을 수 있습니다로 실행 히트, 그래서 그냥 타임즈 새로운를 사용합니다.

출처

2013-05-17 jcvandan

Chrome의 버그처럼 보입니다. 글리프 인덱스에는 off-by-one 오류가 있습니다.

는 http://jsfiddle.net/eUyr6/

ABC

가

나는 크롬 개발자들에게 버그 리포트를 제출 한

BCD

로 렌더링을 참조하십시오.

출처

2013-05-20 19:25:33

내가 그 캐릭터를 알아 차리지 못했다고 나는 믿을 수 없다! 사실 뭔가를 렌더링 하긴하지만 실제로는 글꼴을 사용하지 않습니다. – jcvandan

이것을 파악한 적이 있습니까? 나는 다른 글꼴로 똑같은 문제를 겪고있다. – Bodman

이 문제가 발생했습니다. 대신 woff 형식의 글꼴을 가져 오면 Chrome에서 글리프/텍스트를 올바르게 렌더링한다는 사실에 주목하십시오. 나는 이런 식으로 악화 된 앤티 앨리어싱을 보지 않았지만 YMMV.

@font-face { 
    font-family: "Open Sans"; 
    src: url("../css/fonts/opensans_regular.eot"); 
    src: url("../css/fonts/opensans-regular.eot?#iefix") format("embedded-opentype"), 
    url("../css/fonts/opensans-regular.woff") format("woff"), 
    url("../css/fonts/opensans-regular.svg#opensansregular") format("svg"), 
    url("../css/fonts/opensans-regular.ttf") format("truetype"); 
    font-weight: 400; 
    font-style: normal; 
}

그냥 woff 선언을 svg-dito 위의 줄에 삽입하십시오.

건배!

출처

2013-05-22 18:06:40 kunambi

임의의 문자가있는 <canvas>의 크롬 렌더링 SVG 글꼴

답변

관련 문제