blob: c014e43836c892ff864f722d3532d06f72458522 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: SVG Fonts
slug: Web/SVG/Tutorial/SVG_Fonts
tags:
- SVG
- 'SVG:Tutorial'
translation_of: Web/SVG/Tutorial/SVG_fonts
---
<p>{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial/SVG_Image_Tag") }}</p>
<p>SVG で Web フォントのサポートが明示されたのは、それがずっと望まれていたからです。しかし画像のレンダリングには正しいフォントが重要であるため、SVG にフォントを定義する技術が追加されました。これは PostScript や OTF のような他のフォント形式と同じようなものを意図するのではなく、レンダリングエンジン向けにグリフ情報を埋め込む簡単な手段です。</p>
<div class="note">ブラウザでの SVG フォントのサポートは、広く行われているとは言えません。Opera の他、WebKit ブラウザ (デスクトップおよびモバイル) だけがフォントを表示できます。Firefox は <a href="/ja/docs/Web/Guide/WOFF" title="ja/About WOFF">WOFF</a> へ集中するために、SVG フォントの実装を無期限に延期しました。しかし他のツール、たとえば Adobe SVG Viewer、Batik、Inkscape の一部は SVG フォントをサポートしています。</div>
<p>SVG フォントを定義するための基盤は {{ SVGElement("font") }} 要素です。</p>
<p>{{ 英語版章題("Defining a font") }}</p>
<h2 id="フォントの定義">フォントの定義</h2>
<p>フォントに必要なすべての情報を得ることに、連携して関わる要素がいくつかあります。始めに (<a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">仕様書</a> で示されている) 宣言の例、その後に詳しい説明を示します。</p>
<pre><font id="Font1" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="bold" font-style="normal"
units-per-em="1000" cap-height="600" x-height="400"
ascent="700" descent="300"
alphabetic="0" mathematical="350" ideographic="400" hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
<glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
<glyph unicode="@"><!-- Outline of @ glyph --></glyph>
<!-- more glyphs -->
</font>
</pre>
<p>まずは {{ SVGElement("font") }} 要素から始まります。これは id 要素を持っており、それは URI を通してフォントを参照する (後述) ために必要です。<code>horiz-adv-x</code> 属性は 1 つのグリフのパス定義に比べて、文字の幅を平均してどのくらい広げるかを定義します。値 <code>1000</code> は、作業を行うにあたりほどよい値を設定します。また、基本的なグリフボックスのレイアウトをさらに定義するための付随的な属性がいくつかあります。</p>
<p>{{ SVGElement("font-face") }} 要素 CSS の <a href="/Ja/CSS/@font-face" title="ja/css/@font-face"><code>@font-face</code></a> 宣言と対になるものです。これはフォントウェイトやフォントスタイルの分類など、最終的なフォントの基本的なプロパティを定義します。前出の例で最も重要で、最初に定義するものは <code>font-family</code> です。この値は、CSS や SVG の <code>font-family</code> プロパティで参照することができます。<code>font-weight</code> および <code>font-style</code> 属性は、同じ目的を持ちます。その後に続く属性は、フォントレンダリングエンジンへのレンダリング指示になります。例えば、グリフ全体の高さを表すのが<a class="external" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29" title="http://en.wikipedia.org/wiki/Ascender_(typography)">アセンダ</a>です。</p>
<p><code>font-face</code> 要素の子要素である {{ SVGElement("font-face-src") }} 要素は、CSS の <code>@font-face</code> 宣言の <code>src</code> プロパティに対応します。子要素の {{ SVGElement("font-face-name") }} や {{ SVGElement("font-face-uri") }} を用いて、フォントの宣言で外部のソースを指し示すことができます。前出の例では、レンダラーの手元に "Super Sans Bold" という名前のローカルフォントが存在する場合は、そのフォントを用いるべきであることを示します。</p>
<p>{{ SVGElement("font-face-src") }} の後に {{ SVGElement("missing-glyph") }} 要素があります。これはあるグリフがフォント内で見つからず、またフォールバックする仕組みもない場合に何を表示するべきかを定義します。またこの要素では、どのようにグリフを作成するかも示しています。単純にグラフィックの SVG コンテンツを内部に追加するのです。また、{{ SVGElement("filter") }}、{{ SVGElement("a") }}、あるいは {{ SVGElement("script") }} といった、他の SVG 要素もここで用いることができます。ただし単純なグリフを作るなら、path 要素の場合と同じ働きである <code>d</code> 属性を追加することもできます。</p>
<p>実際のグリフは {{ SVGElement("glyph") }} 要素で定義します。ここで最も重要な属性は <code>unicode</code> です。この属性は Unicode のコードポイントを定義して、その文字が <code>glyph</code> 要素で示すグリフで表現されます。<code>lang</code> 属性を指定した場合は、さらにグリフを特定の言語 (フォントを使用する側の <code>xml:lang</code> で示されます) のみに限定することができます。繰り返しになりますがグリフを定義するために任意の SVG を用いることができ、またユーザエージェントが対応するすばらしいエフェクトを用いることもできます。</p>
<p><code>font</code> 内で定義することができる要素がさらに 2 つあり、それは {{ SVGElement("hkern") }} と {{ SVGElement("vkern") }} です。それぞれの実体は少なくとも 2 つの文字を参照し、また k 属性はそれらの文字の間の距離をどれだけ縮めるかを定義します。初歩的な例は "A" と "V" であり、レンダラーは "AV" という文字列を、単独の文字が暗に定義する距離よりも間隔を狭くして配置します。</p>
<pre><hkern u1="A" u2="V" k="20" />
</pre>
<p>{{ 英語版章題("Referencing a font") }}</p>
<h2 id="フォントの参照">フォントの参照</h2>
<p>これはとても単純です。これまで説明したようにフォントの宣言をひとまとめに収めた場合は、<code>font-family</code> 属性を用いるだけでよいのです。</p>
<pre><font>
<font-face font-family="Super Sans" />
<!-- and so on -->
</font>
<text font-family="Super Sans">My text uses Super Sans</text>
</pre>
<p>ただし、どこでどのようにフォントを定義するかの自由のために、複数の方法を自由に組み合わせてもかまいません。</p>
<p>{{ 英語版章題("Option:_Use_CSS_.40font-face") }}</p>
<h3 id="オプション_CSS_font-face_の利用">オプション: CSS @font-face の利用</h3>
<p>リモートの (またはリモートでない) フォントの参照に @font-face を用いることができます。</p>
<pre><font id="Super_Sans">
<!-- and so on -->
</font>
<style type="text/css">
@font-face {
font-family: "Super Sans";
src: url(#Super_Sans);
}
</style>
<text font-family="Super Sans">My text uses Super Sans</text>
</pre>
<p>{{ 英語版章題("Option: reference a remote font") }}</p>
<h3 id="オプション_リモートフォントの参照">オプション: リモートフォントの参照</h3>
<p>前に述べた font-face-uri で外部のフォントを参照することができ、高い再利用性を得ることができます。</p>
<pre><font>
<font-face font-family="Super Sans">
<font-face-src>
<font-face-uri xlink:href="fonts.svg#Super_Sans" />
</font-face-src>
</font-face>
</font>
</pre>
<p>{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial") }}</p>
<p>{{ languages( { "en": "en/SVG/Tutorial/SVG_Fonts"} ) }}</p>
|
