2

SVG内でテキストをフォーマットする最良の方法についてもう少し情報を得たいと思ってい ます

しかし、フォント スタックを構築する方法を指定していません。次の xml コードを css のように扱ってみましたが (一部の人が示唆しているように)、うまくいきませんでした。

font-family:Times New Roman;
-inkscape-font-specification:Times New Roman

質問。cssに従ってsvgのフォントスタックを構築するにはどうすればよいですか?

(私は font-face や svg フォントにはあまり興味がありません。なぜなら、私が読んだことから、それらは現時点ではそれほど広くサポートされていないと信じているからです。)

xml 内でこれらのモードでテキストをフォーマットしようとしましたが、うまくいきませんでした。

 font-family:Verdana,Times New Roman;
 font-family:'Verdana,"Times New Roman"';
 font-family:Verdana,"Times New Roman";
 font-family:'Verdana,Times New Roman';

編集http://www.w3.org/TR/2008 に従って、cssに従うように指示する w3 http://www.w3.org/TR/SVG/text.html#FontPropertiesUsedBySVGからもこれを見つけました/REC-CSS2-20080411/fonts.html#font-specification です が、css (font-family:"Times New Roman",Times,serif;) のように入れてもうまくいきません。

4

2 に答える 2

4

font-family プロパティは CSS 定義と同じであるため、必要に応じてフォント スタックを指定できます。

属性を使用した例:

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="100" 
   font-family="'Times New Roman', Times, serif" font-size="48">
    Some text
  </text>
</svg>

またはさらに良いことに、クラスを使用します：

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .seriftext {
      font-family: 'Times New Roman', Times, serif;
      font-size: 48px;
    }
  </style>
  <text x="10" y="100" class="seriftext">
    Some text
  </text>
</svg>
于 2012-05-24T08:16:33.767 に答える
0

Inkscape が生成する xml 出力を確認します。Inkscape は、「font-family:Sans」という誤った font-family 値を生成します。これは「サンセリフ」であるはずですが、ダッシュで切り捨てられていると思います。この値はスタイル文字列の末尾に追加されるため、テキスト エディターで xml を表示したときに表示されない場合があります。スタイル文字列を編集して独自の font-family 定義を配置しても、間違った定義を削除しない場合 (まだ見ていないため)、何も変わりません。

 <!--this wont work. Two font-family specs (scroll to the end).-->       
    style="font-family:arial,sans-serif;font-size:40px;font-style:normal;font-family:Sans"

    <!--this wont work either. Well you'll get the default Serif font-->
    style="font-family:Sans;font-size:40px;font-style:normal;font-weight:normal;"

    <!--this will work-->
    style="font-family:arial,sans-serif;font-size:40px;font-style:normal;font-weight:normal;"

    <!--so will this-->
    style="font-family:Arial,Sans-Serif;font-size:40px;font-style:normal;font-weight:normal;"

    <!--and this-->
    style="font-family:tahoma,arial,Sans-Serif;font-size:40px;font-style:normal;font-weight:normal;"

 <!--this too-->
style="font-family:Times New Roman, Serif;font-size:40px;font-style:normal;font-weight:normal;"

例：

<text
   style="font-family:Times New Roman, Serif;font-size:40px;font-style:normal;font-weight:normal;">
    <tspan
     x="60"
     y="60">
    The rain in spain
    </tspan>
</text>
于 2012-07-21T09:17:48.453 に答える