2013-05-07 2 views
1

SVG 표준의 font-face 요소를 사용하려고합니다. 현재 Webkit은 폰트 모듈을 적절하게 구현한다고 주장하지만 외부 참조 된 TTF 파일로 작업 할 수는 없습니다.TTF 글꼴이있는 SVG 글꼴 - 얼굴

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <font-face font-family="blabla"> 
     <font-face-src> 
     <font-face-uri xlink:href="/path/to/font.ttf" /> 
     </font-face-src> 
    </font-face> 
    </defs> 
    <text font-family="blabla">This doesn't work unfortunately</text> 
</svg> 

는 위의 예는하지만 작동 않습니다 SVG 문서에 @font-face {}에 포함 된 스타일 태그를 사용하여 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? (이 SVG 문서가 HTML5 문서에 인라인되어 있다고 생각하십시오.)

이것이 실제로 가능한 경우 JavaScript로도 가능합니다 (글꼴 로딩)?

+0

CSS로 추가 할 때 작동한다면 CSS 만 사용하면 안됩니까? – robertc

+1

더 많은 "기본"구현을 사용하는 것이 더 좋고 작동해야하는 경우 왜 그렇지 않은지 알고 싶습니다. – Roger

+0

이 질문은 SVG 글꼴을 사용해 보도록 권장했지만 어떤 브라우저에서도 작동하지 못했습니다. 이유 : 그들은 보편적으로 사용되지 않을 것입니다. ☹ http://caniuse.com/#search=svg%20fonts –

답변

1

이론적으로는 예제가 작동해야하지만 SVG 글꼴을 제외한 모든 브라우저가 <font-face-uri>을 구현 한 것으로 생각하지 않습니다. 가능한 이유는 SVG 1.1 사양에서 다른 글꼴 형식을 요구하지 않았기 때문입니다. SVG 글꼴 형식을 사용하는 w3c의 svg testsuite에서 대부분 테스트가 있었기 때문입니다.

css @ font-face를 사용하는 것은 잘못된 것이 아니며, CSS 스타일링을 위해 CSS를 지원하는 모든 svg 사용자 에이전트에서 @ font-face를 지원해야합니다 (http://www.w3.org/TR/SVG11/fonts.html#FontDescriptionsAlternatives 참조). 여기에는 현재 svg를 지원하는 모든 웹 브라우저가 포함됩니다.

+0

@ font-face는 잘 알고 있지만 Webkit이 왜 [font-face-uri] (http : //www.webkit.org/projects/svg/status.xml)하지만 전혀 작동하지 않습니다. – Roger