7

外部依存関係なしで、配布したいスタンドアロンの HTML ドキュメントがあります。このドキュメントでは、一部のユーザーのみがインストールする非標準フォントを使用しています。

フォントがインストールされていないユーザーのために、埋め込み SVG ドキュメントにフォントのコピーを含めています<body>。(この例では 1 グリフ フォントを使用していますが、実際のドキュメントでは完全なフォントを使用しています。)

<svg style="display: none;"><defs>
  <font id="MyFontElement">
    <font-face font-family="MyFont" />
    <glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />    
  </font>
</defs></svg>

SVG フォントは通常のフォントほど見栄えがよくないため、フォントがローカルにインストールされていない場合にのみ SVG フォントを使用したいと考えています。フォントが外部 SVG ドキュメントで定義されている場合、次のようにローカルにインストールされたフォントよりも低い優先度で使用できます: ( fiddle )

<style>
  @font-face {
    font-family: "My Font";
    src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
  }
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>

スクリーンショット

残念ながら、現在のドキュメントのフォントでは、明らかなバリエーションはどれも機能しないようです: ( fiddle )

  src: local("My Font"),
       url("./#MyFontElement") format("svg"),
       url("./#MyFontElement"),
       url("#MyFontElement") format("svg"),
       url("#MyFontElement");

宣言がなくても、フォントはで指定された@font-faceとして文書内ですでに使用可能です。ただし、これはという名前のネイティブ フォントよりも優先的に使用されるため、解決策ではありません。MyFontfont-family<font-face />MyFont

...として参照できることを願っていましたlocal("MyFont")( fiddle )

  src: local("My Font"), /* local */
       local("MyFont"); /* embedded */

...しかし、それもうまくいきません。

埋め込みフォントに別の名前を付けて、優先度を下げて使用することもstyle="font-family: LocalFont, EmbeddedFont"できますが、ユーザーがローカル ファイルからドキュメントにスニペットをインポートできるようにすると、それらのローカル ファイルは標準名でのみフォントを参照します。これらの参照をインポート時に書き換えることは可能ですが、私はその解決策が好きではありません。

@font-face現在のドキュメントに埋め込まれている SVG フォントを宣言から参照するにはどうすればよいですか?

4

2 に答える 2

5

フォントをデータURIに変換し、CSS宣言に埋め込みます:(フィドル）

<style>
@font-face {
  font-family: "My Font";
  src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>

#MyFont注意点が1つあります。このようなデータURIでID指定子（）を使用することはできません。したがって、複数のフォントを個別に参照するのではなく、エンコードされたファイルに1つのフォントしか含めることができません。（必要なことではありません。各フォントの宣言で複数の埋め込みフォントのデータを複製すると、スペースが大幅に浪費されます。）

于 2012-07-11T17:37:17.333 に答える
1

最初にcssでローカルフォント名を指定し、次に埋め込みフォント名を指定します。

p {
    font-family: MyFontLocalName, MyFontEmbeddedName;
}

http://jsfiddle.net/gilly3/xX6Bv/5/

MyFontLocalNameがユーザーのコンピューターにインストールされている場合は、そのフォントが使用されます。インストールされていない場合は、そのフォントが使用MyFontEmbeddedNameされます。

于 2012-07-11T17:38:37.993 に答える