web-dev-qa-db-ja.com

svg @ font-faceはsvgで機能しますが、ページに含まれている場合は機能しません

@font-face構文を使用した特定のフォントを含むsvgファイルがあります。このsvgは/logo/logo-big-web.svgにあり、フォントはサーバー上の/font/MDN/MDN.ttfにあります。

ブラウザでhttp://www.mywebsite/logo/logo-big-web.svgを開くと、フォントが正しく読み込まれ、svgファイルが正しく表示されます。

ただし、svgファイルをhtmlファイル（たとえばindex.html）に埋め込もうとすると、次のようになります。

<img src="/logo/logo-big-web.svg" ... ></img>

ブラウザでhttp://www.mywebsite/index.htmlを開くと、フォントが正しく読み込まれず、svgに醜いデフォルトフォントが表示されます。

他の誰かがこの問題を経験しましたか？どうやってそれを回避するのですか？

フォントをsvgファイル内にsvgグリフとして埋め込むことができることは知っていますが、これはFirefoxでは機能せず、Webページ自体で使用するためにフォントをロードしている間はsvgのファイルサイズが大幅に増加します（フォントを2回ロードするのは無駄です）。したがって、グリフを埋め込むことはできません。埋め込まれたdata:uriについても同じことが言えます。

更新：

フォントはsvgファイルで次のように指定されています。

<defs>
    <style>
        @font-face {
            font-family: MDN;
            src: url("/font/MDN/MDN.ttf"); }
    </style>
</defs>

そして私はそれを次のように使用します：

<text font-family="MDN" font-size="11"> <textPath ... > ... </textPath> </text>

アップデート2：

別のスタイルシートでフォントを定義して問題を回避し、次のように含めようとしました。

<?xml-stylesheet type="text/css" href="/style/slyle.css" ?>

しかし、これには同じ問題があるようです。ブラウザ（http://www.mywebsite/logo/logo-big-web.svg）でsvgを直接開いた場合は機能しますが、html imgタグでsvgを使用したりバックグラウンドとして使用したりすると機能しなくなります。 html要素。

cssxmlsvgfont-face
21
romeovs

関連する質問へのこの回答 によると、埋め込みsvgイメージはスタンドアロンイメージである必要があります。上記のコメントで述べたように、すべての外部アセットを埋め込むことで、svgの「スタンドアロン」を作成できます。したがって、私の場合、次のいずれかを実行する必要があります。

  1. データを使用してフォントを埋め込むuri：src: url("data:application/font-woff;base64,<base64 encoded font here")、
  2. フォントをsvgグリフとして埋め込みます。これは、Firefoxのサポートがないためにすでに除外していました。
  3. 私の編集ソフトウェアでフォントをパスに変換します（例：Adobe illustratorの展開パス）。

私はsvgファイルをできるだけ軽量に保つのが本当に好きなので、これらの方法の1つは満足のいくようには見えませんでした。

問題全体を回避する別の解決策は、objectタグの代わりにhtmlimgタグを使用することです。このようにして、svgはスタンドアロンのイメージ以上のものにすることができ、他のアセットを含めるためにxml包含メソッドの全範囲を使用できます。 これは前述の質問ですでに指摘されています 。

私はsvgを埋め込むためにobjectメソッドを使用することを選択しました。適切なimg要素を使用する代わりに、これを行うことに根本的な問題があることがわかった場合は、この回答を更新します。

28
romeovs