SVG + embedded font: how to display text in italic?
My purpose is to create a self containing vectorial logo in SVG = I want to integrate all the font glyphs inside this SVG file.
For one part of my text I need a special font in italic. The font I want (Desyrel) only exists in a single .ttf file. I have then converted that font to SVG (tried different online tools and FontForge).
I have then created an SVG file with the text I want to display and the embedded svg font definitions (selected glyphs only). That looks like:
<?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>
When I do this my font does not appear in italic. I have tried changing the font-style in the font-face definition to 'normal' or even 'italic'.
The problem is I know this font can be displayed in italic. If I include in my SVG:
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Desyrel2';
font-weight: normal;
font-style: normal;
src: url("Desyrel.ttf")
}
]]>
</style>
and use that font-family for the text, the text is indeed displayed in italic. But that solution defeats my original purpose to have a self contained SVG...
I don't know much about fonts or SVG but I have searched extensively on the web to find solutions or clues for my problem.. that's why I need your help!
Your font isn't italic, what happens in the TTF case is that the browser synthesizes the italic by adding a small skew transform. It seems this is not done for SVG fonts (probably an oversight).
A solution is to use fontforge to slant the glyphs (if that's all you need), in the menus it's "Element > Style > Italic..." (more info here).
Then generate the svg font.
精彩评论