1

私の目的は、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についてはよくわかりませんが、問題の解決策や手がかりを見つけるためにWebで広範囲に検索しました。そのため、あなたの助けが必要です。

4

1 に答える 1

6

フォントはイタリックではありません。TTFの場合は、ブラウザが小さなスキュー変換を追加してイタリックを合成します。これはSVGフォントでは行われていないようです（おそらく見落とし）。

解決策は、fontforgeを使用してグリフを傾斜させることです（必要な場合はそれだけです）。メニューでは、[要素]>[スタイル]>[斜体...]（詳細はこちら）です。

次に、svgフォントを生成します。

于 2011-05-14T14:55:32.413 に答える