SVG + 포함 글꼴 : 기울임 꼴로 텍스트를 표시하는 방법?

내 목적은 SVG에서 벡터 로고가 포함 된 자기를 만드는 것입니다.이 SVG 파일 안에 모든 글꼴 모양을 통합하고 싶습니다.SVG + 포함 글꼴 : 기울임 꼴로 텍스트를 표시하는 방법?

내 텍스트의 일부분에 기울임 꼴로 특수 글꼴이 필요합니다. 원하는 글꼴 (Desyrel)은 단일 .ttf 파일에만 있습니다. 그런 다음 해당 글꼴을 SVG로 변환했습니다 (다른 온라인 도구와 FontForge를 사용해 보았습니다).

다음은 표시 할 텍스트와 포함 된 svg 글꼴 정의 (선택한 글립 만)가있는 SVG 파일을 만들었습니다. 그 모양은 다음과 같습니다.

<?xml version="1.0" encoding="UTF-8"?> 
<svg width="800px" height="300px" version="1.1" xmlns = 'http://www.w3.org/2000/svg'> 
    <defs> 
    <font id="font1" horiz-adv-x="614" > 
     <font-face font-family="Desyrel" units-per-em="2048" /> 
     <glyph unicode="-" d="M109 301v166h376v-166h-376z" /> 
... 
    </font> 
    </defs> 

    <text x="230" y="100" font-family="Desyrel" font-size="110px" font-style="italic">myText</text> 
</svg>

내 글꼴은 기울임 꼴로 나타나지 않습니다. 나는 font-face 정의에서 font-style을 'normal'또는 'italic'으로 변경하려고 시도했다.

문제는이 글꼴을 이탤릭체로 표시 할 수 있다는 것입니다. 내 SVG에 포함하는 경우 :

<style type="text/css"> 
    <![CDATA[ 
    @font-face { 
     font-family: 'Desyrel2'; 
     font-weight: normal; 
     font-style: normal; 
     src: url("Desyrel.ttf") 
    } 
    ]]> 
</style>

및 텍스트에 해당 글꼴 가족을 사용, 텍스트가 참으로 기울임 꼴로 표시됩니다. 그러나 그 솔루션은 SVG를 가지고있는 본래의 목적을 이깁니다 ...

글꼴이나 SVG에 대해서는 잘 모릅니다 만, 웹에서 내 문제에 대한 해결책이나 단서를 찾기 위해 광범위하게 검색했습니다. 그 이유는 무엇입니까? 도움이 필요해!

출처

2011-05-14 chris

글꼴이 기울임 체가 아니며, TTF 경우에는 브라우저가 작은 기울임 변환을 추가하여 이탤릭체를 합성합니다. 이것은 SVG 글꼴 (아마도 감시)에 대해서는 수행되지 않는 것 같습니다.

해결 방법은 "요소> 스타일> 기울임 꼴 ..."인 메뉴에서 글리프를 비스듬하게 기울이는 것입니다 (추가 정보).

그런 다음 svg 글꼴을 생성하십시오.

출처

2011-05-14 14:55:32

대단히 감사합니다. Erik! 마침내 그 글꼴로 기울임 꼴로 쓸 수있었습니다! – chris

SVG + 포함 글꼴 : 기울임 꼴로 텍스트를 표시하는 방법?

답변

관련 문제