20 フォント

目次

• 20.1 概要
• 20.2 SVG フォントの概観
• 20.3 font 要素
• 20.4 glyph 要素
• 20.5 missing-glyph 要素
• 20.6 グリフ選択規則
• 20.7 hkern 要素と vkern 要素
• 20.8 フォント記述
  • 20.8.1 フォント記述の概観
  • 20.8.2 フォント記述を与える２つの方法
  • 20.8.3 font-face 要素
  • 20.8.4 font-face-src 要素
  • 20.8.5 font-face-uri 要素と font-face-format 要素
  • 20.8.6 font-face-name 要素
• 20.9 DOM インタフェース
  • 20.9.1 インタフェース SVGFontElement
  • 20.9.2 インタフェース SVGGlyphElement
  • 20.9.3 インタフェース SVGMissingGlyphElement
  • 20.9.4 インタフェース SVGHKernElement
  • 20.9.5 インタフェース SVGVKernElement
  • 20.9.6 インタフェース SVGFontFaceElement
  • 20.9.7 インタフェース SVGFontFaceSrcElement
  • 20.9.8 インタフェース SVGFontFaceUriElement
  • 20.9.9 インタフェース SVGFontFaceFormatElement
  • 20.9.10 インタフェース SVGFontFaceNameElement

20.1 概要

SVG にとり、フォントの確実な配信は要求事項になる。 デザイナーにとっては SVG 内容を任意のフォントで作成しつつ、末端利用者のコンピュータに必要なフォントがインストールされていなくとも，同じグラフィック結果が現れるようにすることが必要である。 このことは印刷の世界に類似する。 デザイナーは印刷用の絵図の作成において与えられたフォントを利用し、印刷においてはデザイナーの文書作成システムに現れるものと正確に同じグラフィック内容が現れる。 Reliable delivery of fonts is a requirement for SVG. Designers need to create SVG content with arbitrary fonts and know that the same graphical result will appear when the content is viewed by all end users, even when end users do not have the necessary fonts installed on their computers. This parallels the print world, where the designer uses a given font when authoring a drawing for print, and the graphical content appears exactly the same in the printed version as it appeared on the designer's authoring system.

SVG は、末端利用者への信頼できるフォントデータの配信を実現するための鍵となる仕組みに， CSS2 で定められた Webフォント ([CSS2], 15.1 節) の枠組みを利用する。 一般的な筋書きとして、 SVG 文書片に現れるすべてのテキスト要素のための，圧縮されサブセット化された Webフォントを， SVG 文書作成アプリケーションが生成することが考えられる。 典型的には、 Webフォントは，参照元の文書から相対的な URL に置かれる。 SVG utilizes the WebFonts facility defined in CSS2 ([CSS2], section 15.1) as a key mechanism for reliable delivery of font data to end users. In a common scenario, SVG authoring applications generate compressed, subsetted WebFonts for all text elements used by a given SVG document fragment. Typically, the WebFonts are saved in a location relative to the referencing document.

現今の Webフォントの枠組みにおける欠点の一つは、 CSS2 などの仕様が，特定のフォント形式のサポートを要求していない所にある。 その結果、異なる実装が異なる WebFonts をサポートすることになり，ウェブサイト作成者にとってはすべての UA と互換性がとれる WebFonts を利用する単一のウェブサイト構築が難しくなってしまったことである。 One disadvantage to the WebFont facility to date is that specifications such as CSS2 do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.

すべての 適合 SVG ビューア からのサポートが保証される共通のフォント形式を提供するため、 SVG は SVG の中でフォントを定義する機能を提供する。 この機能は SVG フォント と呼ばれる。 To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.

SVG フォントにより、テキストを表現するグラフィックスの意味論を深められるようになる。 例えば多くの会社のロゴでは意匠を凝らした社名が描かれる。 ロゴを SVG フォントの一連のグリフとして表し，このフォントを参照する text 要素で描画させることにより、 アクセシビリティ の向上を図れる局面もある。 SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a ‘text’ element which references this font.

20.2 SVG フォントの概観

SVG フォント は SVG の font 要素を用いて定義されるフォントである。 An SVG font is a font defined using SVG's ‘font’ element.

SVG フォントの目的は表示のみの環境においてグリフの外形線の配信を可能にすることである。 ウェブページに付随する SVG フォントは、閲覧および表示目的でのみサポートされなければならない。 グラフィック編集アプリケーションあるいはファイル変換ツールは、 SVG フォントのシステムフォントへの変換を試みてはならない。 その意図する所は、 SVG ファイルに付随する SVG フォントではなく， SVG ファイルが２人のクリエータ間で交換できるところにある。 そのかわり、クリエータたちは SVG ファイルの編集において，事前にフォントの利用許諾を受ける必要がある。 font-face-name 要素は、編集に利用するために許諾を得たフォントの名前を指示する。 The purpose of SVG fonts is to allow for delivery of glyph outlines in display-only environments. SVG fonts that accompany Web pages must be supported only in browsing and viewing situations. Graphics editing applications or file translation tools must not attempt to convert SVG fonts into system fonts. The intent is that SVG files be interchangeable between two content creators, but not the SVG fonts that might accompany these SVG files. Instead, each content creator will need to license the given font before being able to successfully edit the SVG file. The ‘font-face-name’ element indicates the name of licensed font to use for editing.

SVG フォントにはフォント外形線にヒント情報が無い。 このため、多くの実装で，フォントサイズが小さいときのテキストの品質と読み取り易さが制限されることが予想される。 クリエータにとっては、小さいフォントサイズにおけるより良い品質と読み取り易さのために、オペレーティングシステムに同梱されるフォントや代替 Webフォント形式によるフォントのような，代替フォントの技術の利用が望ましいこともある。 SVG fonts contain unhinted font outlines. Because of this, on many implementations there will be limitations regarding the quality and legibility of text in small font sizes. For increased quality and legibility in small font sizes, content creators may want to use an alternate font technology, such as fonts that ship with operating systems or an alternate WebFont format.

SVG フォントは SVG の要素と属性を利用して記述されるので、フォントデータがかさばらないように特に設計された Webフォント形式のフォントの方が， SVG フォントよりも容量が小さくなる場合もある。 ウェブページの高速な配信のためには，代替フォントの技術が望まれる場合もある。 Because SVG fonts are expressed using SVG elements and attributes, in some cases the SVG font will take up more space than if the font were expressed in a different WebFont format which was especially designed for compact expression of font data. For the fastest delivery of Web pages, content creators may want to use an alternate font technology.

SVG フォントの真価は SVG-UA における可用性が保証されている所にある。 状況によっては、 SVG フォントをテキスト描画における第一候補とすることが適切になる。 別の状況においては、 SVG フォントは第一候補のフォント（ヒント情報付きのシステムフォントかもしれない）が利用者環境で利用できない場合のための，予備の代替フォントになる。 A key value of SVG fonts is guaranteed availability in SVG user agents. In some situations, it might be appropriate for an SVG font to be the first choice for rendering some text. In other situations, the SVG font might be an alternate, back-up font in case the first choice font (perhaps a hinted system font) is not available to a given user.

SVG フォントの特徴と属性は Cascading Style Sheets (CSS) level 2 仕様の フォントの章 ([CSS2], 15 章) に述べられているフォントの特徴とパラメタに緊密に対応する。 このモデルにおいては、アドバンス値と基底線の位置やグリフの外形線などの種々のフォントに関する計量が，同じサイズで印字されるときの隣接する行の間隔を高さとする抽象的な正方形に相対的な単位で表される。 この正方形は、 エム平方 と呼ばれる，グリフの外形線を定義するためのデザイン格子である。 font-face 要素の units-per-em 属性の値は、エム平方が単位に分割される数を指定する。 他の種類のフォントにおける一般的な値としては、例えば 250 （ Intellifont ）, 1000 （ Type 1 ）, 2048 （ TrueType, TrueType GX, Open-Type ）などがある。 SVG における標準のグラフィックの初期座標系では， Y 軸が下向き（ 初期座標系 を見よ）であるが、それとは異なり，普及している多くのフォント形式が従う業界慣行と整合させるため、 SVG フォントのデザイン格子が従うグリフの初期座標系の Y 軸は，上向きである。 The characteristics and attributes of SVG fonts correspond closely to the font characteristics and parameters described in the Fonts chapter of the Cascading Style Sheets (CSS) level 2 specification ([CSS2], chapter 15). In this model, various font metrics, such as advance values and baseline locations, and the glyph outlines themselves, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the em square and it is the design grid on which the glyph outlines are defined. The value of the ‘units-per-em’ attribute on the ‘font-face’ element specifies how many units the em square is divided into. Common values for other font types are, for example, 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType, TrueType GX and Open-Type). Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward (see The initial coordinate system), the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.

SVG フォントと関連付けられるグリフは、限界ボックスについての情報を指定しない。 グリフの外形線は SVG のグラフィックス要素として記述されるので、実装はグリフの描画に，標準のグラフィック描画か専用のフォント描画技術のどちらを利用するかを選択できる。 後者の場合、必要となる最大の限界ボックスとオーバーハング（ overhang ）の計算は，グリフの外形線に含まれるグラフィックス要素を解析することで行われる。 SVG fonts and their associated glyphs do not specify bounding box information. Because the glyph outlines are expressed as SVG graphics elements, the implementation has the option to render the glyphs either using standard graphics calls or by using special-purpose font rendering technology, in which case any necessary maximum bounding box and overhang calculations can be performed from analysis of the graphics elements contained within the glyph outlines.

SVG フォントは、それを利用する文書に埋め込むことも，外部リソースの一部として保存しておくこともできる。 An SVG font can be either embedded within the same document that uses the font or saved as part of an external resource.

SVG 文書に SVG フォントを埋め込む例をここに示す。 Here is an example of how you might embed an SVG font inside of an SVG document.

<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
  xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <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"><!-- 感嘆符のグリフの外形線 --></glyph>
      <glyph unicode="@"><!-- @ のグリフの外形線 --></glyph>
      <!-- 他のグリフたち -->
    </font>
  </defs>
  <text x="100" y="100" 
           style="font-family: 'Super Sans', Helvetica, sans-serif;
                  font-weight: bold; font-style: normal">Text 
    using embedded font</text>
</svg>

次の例は外部ファイルに保存された SVG フォントを参照するために， CSS の @font-face 規則 ([CSS2], 15.3.1 節) の機能を利用する方法である。 まず，参照される SVG フォントファイルは： Here is an example of how you might use the CSS @font-face facility ([CSS2], section 15.3.1) to reference an SVG font which is saved in an external file. First referenced SVG font file:

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
          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 Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- 感嘆符のグリフの外形線 --></glyph>
      <glyph unicode="@"><!-- @ のグリフの外形線 --></glyph>
      <!-- 他のグリフたち -->
    </font>
  </defs>
</svg>

上の SVG フォントを参照／利用する SVG ファイルは： The SVG file which uses/references the above SVG font

<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>  
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: 'Super Sans'; 
          font-weight: normal;
          font-style: italic;
          src: url("myfont.svg#Font2") format("svg")
        }
      ]]>
   </style>
  </defs>
  <text x="100" y="100"
           style="font-family: 'Super Sans'; font-weight:normal;
                  font-style: italic">Text using referenced font</text>
</svg>

20.3 font 要素

font 要素は SVG フォントを定義する。 The ‘font’ element defines an SVG font.

それぞれの font 要素はフォントの種々の特徴を記述する font-face 子要素を持たなければならない。 Each ‘font’ element must have a ‘font-face’ child element which describes various characteristics of the font.

20.4 glyph 要素

glyph 要素はグリフのグラフィックを定義する。 グリフの座標系は font 要素の種々の属性から定義される。 The ‘glyph’ element defines the graphics for a given glyph. The coordinate system for the glyph is defined by the various attributes in the ‘font’ element.

glyph を構成するグラフィックは、 d 属性による単一の パスデータ 指定, または glyph の内容として与えられる任意の SVG, あるいはそれらの両方, のいずれもあり得る。 この２つのそれぞれに対し、異なる処理が行われる（下を見よ）。 The graphics that make up the ‘glyph’ can be a single path data specification within the ‘d’ attribute, arbitrary SVG as content within the ‘glyph’, or both. These two alternatives are processed differently (see below).

glyph のグラフィックの指定には、 d 属性, あるいは glyph の内容を与える任意の SVG のいずれも利用できる。 The graphics for the ‘glyph’ can be specified using either the ‘d’ attribute or arbitrary SVG as content within the ‘glyph’.

d 属性が指定された場合、この属性のパスデータは次のように処理される： If the ‘d’ attribute is specified, then the path data within this attribute is processed as follows:

• パスデータにおける相対的座標は等価な絶対座標に変換される Any relative coordinates within the path data specification are converted into equivalent absolute coordinates
• これら絶対座標は、フォント座標系から text 要素の現在の座標系へ変換される。 この変換は原点は 現在のテキスト位置 に揃うように, 回転はグリフ方位に揃うように, 拡縮は正しい font-size が得られるようにして定められる。 Each of these absolute coordinates is transformed from the font coordinate system into the ‘text’ element's current coordinate system such that the origin of the font coordinate system is properly positioned and rotated to align with the current text position and orientation for the glyph, and scaled so that the correct ‘font-size’ is achieved.
• 変換結果のパスは、それが path 要素であるかのように，かつグリフに対応する文字（たち）に適用されているスタイル付けプロパティを用いて描画される。 font 要素や glyph 要素に指定されているスタイル付けプロパティはすべて無視される。 The resulting, transformed path specification is rendered as if it were a ‘path’ element, using the styling properties that apply to the characters which correspond to the given glyph, and ignoring any styling properties specified on the ‘font’ element or the ‘glyph’ element.

glyph 要素が子要素を持つ場合、それら子要素は use 要素から参照されたシンボルの描画と同様な仕方で描画される。 その描画は、参照された glyph 要素の内容が別の非公開 DOM 木として末端まで複製されたかのようにして，行われる。 複製された DOM 木は非公開であり，インスタンスが SVG DOM に現れることはない。 If the ‘glyph’ has child elements, then those child elements are rendered in a manner similar to how the ‘use’ element renders a referenced symbol. The rendering effect is as if the contents of the referenced ‘glyph’ element were deeply cloned into a separate non-exposed DOM tree. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance.

CSS によるスタイル付け をサポートする UA においては、この概念的な末端まで複製された glyph 要素の非公開 DOM 木においては、参照された glyph とその内容の CSS カスケード ([CSS2], 6 章) によるプロパティ値も複製され， font 要素のプロパティ値も適用される。 CSS2 セレクタについては、元々の（参照された）要素にはそれらが正規の文書構造の一部なので適用されるが，この（概念的な）複製 DOM 木にはその内容が正規の文書構造の一部ではないので適用されない。 For user agents that support Styling with CSS, the conceptual deep cloning of the referenced ‘glyph’ element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced ‘glyph’ and its contents, and also applies any property values on the ‘font’ element. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

しかしながら，プロパティ継承については、参照された glyph 要素が末端まで複製された子として，テキストそのままが文書木内に挿入されたかのようにふるまう。 参照された glyph は対応する文字たちを含む要素からプロパティを継承し、 font 要素の元々の親からのプロパティを継承しない。 Property inheritance, however, works as if the referenced ‘glyph’ had been textually included as a deeply cloned child within the document tree. The referenced ‘glyph’ inherits properties from the element that contains the characters that correspond to the ‘glyph’. The ‘glyph’ does not inherit properties from the ‘font’ element's original parents.

この生成された内容においては、与えられた glyph の各インスタンスに対し，その参照された glyph 要素に対する font 要素に対して CSS カスケードが適用された結果のプロパティ値をすべてを運ぶ g が作成される。 この g 内に、 glyph 要素に対して CSS カスケードが適用された結果のプロパティ値すべてを運ぶ別の g が作成される。 glyph 要素の元々の内容はこの内側の g 要素内に末端まで複製される。 In the generated content, for each instance of a given ‘glyph’, a ‘g’ is created which carries with it all property values resulting from the CSS cascade on the ‘font’ element for the referenced ‘glyph’. Within this ‘g’ is another ‘g’ which carries with it all property values resulting from the CSS cascade on the ‘glyph’ element. The original contents of the ‘glyph’ element are deep-cloned within the inner ‘g’ element.

glyph が d 属性と子要素の両方を持つ場合、 d 属性が先に描画された後に子要素が描画される。 If the ‘glyph’ has both a ‘d’ attribute and child elements, the ‘d’ attribute is rendered first, and then the child elements.

一般に、 d 属性はシステムフォントと同じ仕方で描画される。 例えばダッシュパターンは、システムフォントに適用されるときと d 属性を用いてグリフを定義する SVG フォントに適用されるときとは同じ見え方になる。 多くの実装において、 d 属性で定義されるグリフを素早く描画したり，更なる性能向上のためにフォントキャッシュを利用することも可能になる。 In general, the ‘d’ attribute renders in the same manner as system fonts. For example, a dashed pattern will usually look the same if applied to a system font or to an SVG font which defines its glyphs using the ‘d’ attribute. Many implementations will be able to render glyphs defined with the ‘d’ attribute quickly and will be able to use a font cache for further performance gains.

glyph 内に子要素を含めることでグリフを定義する方法は、高い柔軟性が得られる反面，複雑さも増す。 グリフの異なる部分に異なるフィルやストロークを用いる技法も可能になる。 例えば、文字 "i" の本体を赤色, ドットは青色にするなど。 このやり方には単位に関する固有の複雑さがある。 テキスト要素に指定される stroke-width プロパティなどの長さを表現するプロパティの値は，グリフの座標系で処理されるので、想定外の結果も生じ得る。 Defining a glyph by including child elements within the ‘glyph’ gives greater flexibility but more complexity. Different fill and stroke techniques can be used on different parts of the glyphs. For example, the base of an "i" could be red, and the dot could be blue. This approach has an inherent complexity with units. Any properties specified on a text elements which represents a length, such as the ‘stroke-width’ property, might produce surprising results since the length value will be processed in the coordinate system of the glyph.

20.5 missing-glyph 要素

missing-glyph 要素は、グリフの描画を試みた際に，そのグリフが定義されていなかった場合に利用するグラフィックを定義する。 missing-glyph 要素の属性は glyph 要素の対応する属性と同じ意味を持つ。 The ‘missing-glyph’ element defines the graphics to use if there is an attempt to draw a glyph from a given font and the given glyph has not been defined. The attributes on the ‘missing-glyph’ element have the same meaning as the corresponding attributes on the ‘glyph’ element.

20.6 グリフ選択規則

文字の並びを描くときのグリフの決定においては、 font 要素の中の glyph 要素が検索される。 検索は最初の glyph から最後のものへと論理順序で， glyph 要素の unicode 属性に指定された Unicode 文字の並びが描画される当該 Unicode 文字の並びに一致するまで行われ、最初に一致したものが用いられる。 したがって，フォントにおいては、リガチャ "ffl" はグリフ "f" の前に定義しておかないと "ffl" は決して選択されないことになる。 When determining the glyph(s) to draw a given character sequence, the ‘font’ element is searched from its first ‘glyph’ element to its last in logical order to see if the upcoming sequence of Unicode characters to be rendered matches the sequence of Unicode characters specified in the ‘unicode’ attribute for the given ‘glyph’ element. The first successful match is used. Thus, the "ffl" ligature needs to be defined in the font before the "f" glyph; otherwise, the "ffl" will never be selected.

altGlyph は常に、 SVG フォントにおける上記グリフ選択規則より優先されることに注意。 Note that any occurrences of ‘altGlyph’ take precedence over the above glyph selection rules within an SVG font.

20.7 hkern 要素と vkern 要素

hkern と vkern 要素は、それぞれ横書と縦書においてカーニングされるグリフ対を定義する。 The ‘hkern’ and ‘vkern’ elements define kerning pairs for horizontally-oriented and vertically-oriented pairs of glyphs, respectively.

カーニング対は、同じフォントの２つのグリフが続けて描画されるときに，その間隔が調整されるようなグリフの対を指定する。 SVG フォントのカーニングが生じるためには、グリフ対が同じフォントに属することが要求されるのに加え，２つのグリフに対応する文字たちのプロパティ： font-family, font-size, font-style, font-weight, font-variant, font-stretch, font-size-adjust, font もすべて同じ値になる必要がある。 Kern pairs identify pairs of glyphs within a single font whose inter-glyph spacing is adjusted when the pair of glyphs are rendered next to each other. In addition to the requirement that the pair of glyphs are from the same font, SVG font kerning happens only when the two glyphs correspond to characters which have the same values for properties ‘font-family’, ‘font-size’, ‘font-style’, ‘font-weight’, ‘font-variant’, ‘font-stretch’, ‘font-size-adjust’ and ‘font’.

カーニング対の例は英字 "Va" である。 この場合、英字 "V" と "a" を少し近付けて描画すれば，見栄えが良くなるであろう。 An example of a kerning pair are the letters "Va", where the typographic result might look better if the letters "V" and the "a" were rendered slightly closer together.

右から左の，および双方向のテキストは、 双方向性との関係 で述べられている様に，２段階の処理を経て配置される。 SVG フォントが利用される場合、カーニングが適用される前に，文字たちは視覚的描画順序において左から右へと（縦書の場合は上から下へ）再配列される。 SVG フォントによるカーニングは、続けて描画されるグリフの対に適用される。 カーニング対の第一グリフは視覚的描画順序において左（または上）側であり、第二グリフは右（または下）側である。 Right-to-left and bidirectional text in SVG is laid out in a two-step process, which is described in Relationship with bidirectionality. If SVG fonts are used, before kerning is applied, characters are re-ordered into left-to-right (or top-to-bottom, for vertical text) visual rendering order. Kerning from SVG fonts is then applied on pairs of glyphs which are rendered contiguously. The first glyph in the kerning pair is the left (or top) glyph in visual rendering order. The second glyph in the kerning pair is the right (or bottom) glyph in the pair.

フォントデザイナーへの便宜とファイルサイズの節減のため、 hkern と vkern は，グリフの集合（例えば Unicode 文字の範囲）と別の集合（例えば別の範囲の Unicode 文字）との間に，同一のカーニング調整値を一括して適用されるように定義できる。 For convenience to font designers and to minimize file sizes, a single ‘hkern’ and ‘vkern’ can define a single kerning adjustment value between one set of glyphs (e.g., a range of Unicode characters) and another set of glyphs (e.g., another range of Unicode characters).

hkern hkern 要素は、２つのグリフが連続して水平に（すなわち横並びに）描画されるときの，カーニング対と水平アドバンスの調整値を定義する。 文字の間隔はカーニング調整により詰められる（負のカーニング調整値は文字の間隔を拡げる）。 The ‘hkern’ element defines kerning pairs and adjustment values in the horizontal advance value when drawing pairs of glyphs which the two glyphs are contiguous and are both rendered horizontally (i.e., side-by-side). The spacing between characters is reduced by the kerning adjustment. (Negative kerning adjustments increase the spacing between characters.)

vkern 要素は、２つのグリフが連続して垂直に（すなわち縦並びに）描画されるときの，カーニング対と垂直アドバンスの調整値を定義する。 文字の間隔はカーニング調整により詰められる（負のカーニング調整値は文字の間隔を拡げる）。 The ‘vkern’ element defines kerning pairs and adjustment values in the vertical advance value when drawing pairs of glyphs together when stacked vertically. The spacing between characters is reduced by the kerning adjustment.

少なくとも u1, g1 のいずれかは与えられなければならず，少なくとも u2, g2 のいずれかは与えられなければならない。 At least one each of ‘u1’ or ‘g1’ and at least one of ‘u2’ or ‘g2’ must be provided.

20.8 フォント記述

20.8.1 フォント記述の概観

フォント記述（ font description ）は、文書作成者のフォント指定とフォントデータの橋渡しを提供する。 フォントデータは、テキストの整形と, 文字に対応する抽象的グリフの描画に必要なデータ — 実際の スケーラブルな外形線やビットマップである。 フォントは font-family プロパティなどのプロパティにより参照される。 A font description provides the bridge between an author's font specification and the font data, which is the data needed to format text and to render the abstract glyphs to which the characters map — the actual scalable outlines or bitmaps. Fonts are referenced by properties, such as the ‘font-family’ property.

指定された各フォント記述は、適切なフォントデータの選択を可能にするために，フォントデータベースに追加される。 フォント記述は、フォントデータのウェブにおける所在やフォントデータの特徴を表す，記述子を持つ。 フォント記述子は、フォントプロパティを特定のフォントデータに結び付けるためにも必要になる。 各フォント記述の詳細度は、単なるフォント名からグリフ幅のリストまで，様々である。 Each specified font description is added to the font database and so that it can be used to select the relevant font data. The font description contains descriptors such as the location of the font data on the Web, and characterizations of that font data. The font descriptors are also needed to match the font properties to particular font data. The level of detail of a font description can vary from just the name of the font up to a list of glyph widths.

フォント記述についての更なる詳細は CSS2 仕様の フォントの章 ([CSS2], 15 章) を参照のこと。 For more about font descriptions, refer to the Fonts chapter in the CSS2 specification ([CSS2], chapter 15).

20.8.2 フォント記述を与える２つの方法

フォント記述は次の２つの方法いずれでも指定できる： Font descriptions can be specified in either of the following ways:

• font-face 要素。 a ‘font-face’ element
• CSS スタイルシートにおける @font-face 規則 ([CSS2], 15.3.1 節) （ CSS による SVG 内容のスタイル付けをサポートする UA にのみ適用可能） an @font-face rule ([CSS2], section 15.3.1) within a CSS style sheet (only applicable for user agents which support using CSS to style the SVG content)

20.8.3 font-face 要素

font-face 要素は CSS2 の @font-face 規則 ([CSS2], 15.3.1 節) に直接対応するものである。 SVG フォントその他任意のフォントの特徴の記述に利用できる。 The ‘font-face’ element corresponds directly to the @font-face facility in CSS2 ([CSS2], section 15.3.1). It can be used to describe the characteristics of any font, SVG font or otherwise.

同じ文書に含まれている SVG フォントの特徴の記述に利用する場合は font 要素が外部依存性の無い独立なものとなるように font-face 要素を当該 font 要素の子として与えることが推奨される。 この場合、 font-face 要素内の font-face-src 要素は無視され， font-face 要素はその親の font 要素の特徴を記述するものとみなされる。 When used to describe the characteristics of an SVG font contained within the same document, it is recommended that the ‘font-face’ element be a child of the ‘font’ element it is describing so that the ‘font’ element can be self-contained and fully-described. In this case, any ‘font-face-src’ elements within the ‘font-face’ element are ignored as it is assumed that the ‘font-face’ element is describing the characteristics of its parent ‘font’ element.

以下の要素と属性は CSS2 仕様 の src 記述子に対応する（ @font-face 規則 と 'src' 記述子 ([CSS2], 15.3.1, 15.3.5 節) 参照）。 The following elements and attributes correspond to the ‘src’ descriptor within an @font-face rule. (Refer to the descriptions of the @font-face rule and 'src' descriptor in the CSS2 specification ([CSS2], sections 15.3.1 and 15.3.5.)

20.8.4 font-face-src 要素

font-face-src 要素は、以下の節で述べる font-face-uri, font-face-format 要素と伴に， @font-face 規則内の src 記述子に対応する（ @font-face 規則 と 'src' 記述子 ([CSS2], 15.3.1, 15.3.5 節) の記述を参照）。 The ‘font-face-src’ element, together with the ‘font-face-uri’ and ‘font-face-format’ elements described in the following sections, correspond to the ‘src’ descriptor within an @font-face rule. (Refer to the descriptions of the @font-face rule and 'src' descriptor in the CSS2 specification ([CSS2], sections 15.3.1 and 15.3.5).

font-face-src 要素はそれぞれ、外部およびローカルのフォントを参照する， font-face-uri と font-face-name 要素を含む。 A ‘font-face-src’ element contains ‘font-face-uri’ and ‘font-face-name’ elements, which are used for referencing external and local fonts, respectively.

20.8.5 font-face-uri と font-face-format 要素

font-face-uri 要素は、現在の SVG 文書の中または外で定義されたフォントを参照するために， font-face-src 要素の中で用いられる。 The ‘font-face-uri’ element is used within a ‘font-face-src’ element to reference a font defined inside or outside of the current SVG document.

font-face-uri が SVG フォント を参照している場合、参照先は SVG font 要素でなければならず，したがって素片識別子 [RFC3986] が必要になる。 参照先の font 要素はローカル（すなわち font-face-uri 要素と同じ文書内）またはリモート（すなわち異なる文書内）のいずれにあってもよい。 When a ‘font-face-uri’ is referencing an SVG font, then that reference must be to an SVG ‘font’ element, therefore requiring the use of a fragment identifier [RFC3986]. The referenced ‘font’ element can be local (i.e., within the same document as the ‘font-face-uri’ element) or remote (i.e., within a different document).

font-face-uri 要素の font-face-format 子要素は、 font-face-uri 要素から参照されるフォントの，サポートされる形式を指定する。 これらは @font-face 規則の中の src 記述子の format(…) の括りに対応する。 Child ‘font-face-format’ elements of a ‘font-face-uri’ element are used to specify the supported formats of the font referenced by that ‘font-face-uri’ element. They correspond to entries in a format(…) clause of the ‘src’ descriptor in an @font-face rule.

20.8.6 font-face-name 要素

font-face-name 要素は、名前によりローカルフォントを参照するために， font-face-src 要素内で利用される。 これは @font-face 規則の src 記述子の， local(…) の括りに対応する。 The ‘font-face-name’ element is used within a ‘font-face-src’ element to reference a local font by name. It corresponds to a local(…) clause in an @font-face rule ‘src’ descriptor.

20.9 DOM インタフェース

20.9.1 インタフェース SVGFontElement

SVGFontElement インタフェースは font 要素に対応する。 The SVGFontElement interface corresponds to the ‘font’ element.

SVG DOM を通した font 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘font’ element via the SVG DOM is not available.

interface SVGFontElement : SVGElement,
                           SVGExternalResourcesRequired,
                           SVGStylable {
};

20.9.2 インタフェース SVGGlyphElement

SVGGlyphElement インタフェースは glyph 要素に対応する。 The SVGGlyphElement interface corresponds to the ‘glyph’ element.

SVG DOM を通した glyph 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘glyph’ element via the SVG DOM is not available.

interface SVGGlyphElement : SVGElement,
                            SVGStylable {
};

20.9.3 インタフェース SVGMissingGlyphElement

SVGMissingGlyphElement インタフェースは missing-glyph 要素に対応する。 The SVGMissingGlyphElement interface corresponds to the ‘missing-glyph’ element.

SVG DOM を通した missing-glyph 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘missing-glyph’ element via the SVG DOM is not available.

interface SVGMissingGlyphElement : SVGElement,
                                   SVGStylable {
};

20.9.4 インタフェース SVGHKernElement

SVGHKernElement インタフェースは hkern 要素に対応する。 The SVGHKernElement interface corresponds to the ‘hkern’ element.

SVG DOM を通した hkern 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘hkern’ element via the SVG DOM is not available.

interface SVGHKernElement : SVGElement {
};

20.9.5 インタフェース SVGVKernElement

SVGVKernElement インタフェースは vkern 要素に対応する。 The SVGVKernElement interface corresponds to the ‘vkern’ element.

SVG DOM を通した vkern 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘vkern’ element via the SVG DOM is not available.

interface SVGVKernElement : SVGElement {
};

20.9.6 インタフェース SVGFontFaceElement

SVGFontFaceElement インタフェースは font-face 要素に対応する。 The SVGFontFaceElement interface corresponds to the ‘font-face’ element.

SVG DOM を通した font-face 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘font-face’ element via the SVG DOM is not available.

interface SVGFontFaceElement : SVGElement {
};

20.9.7 インタフェース SVGFontFaceSrcElement

SVGFontFaceSrcElement インタフェースは font-face-src 要素に対応する。 The SVGFontFaceSrcElement interface corresponds to the ‘font-face-src’ element.

SVG DOM を通した font-face-src 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘font-face-src’ element via the SVG DOM is not available.

interface SVGFontFaceSrcElement : SVGElement {
};

20.9.8 インタフェース SVGFontFaceUriElement

SVGFontFaceUriElement インタフェースは font-face-uri 要素に対応する。 The SVGFontFaceUriElement interface corresponds to the ‘font-face-uri’ element.

SVG DOM を通した font-face-uri 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘font-face-uri’ element via the SVG DOM is not available.

interface SVGFontFaceUriElement : SVGElement {
};

20.9.9 インタフェース SVGFontFaceFormatElement

SVGFontFaceFormatElement インタフェースは font-face-format 要素に対応する。 The SVGFontFaceFormatElement interface corresponds to the ‘font-face-format’ element.

SVG DOM を通した font-face-format 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘font-face-format’ element via the SVG DOM is not available.

interface SVGFontFaceFormatElement : SVGElement {
};

20.9.10 インタフェース SVGFontFaceNameElement

SVGFontFaceNameElement インタフェースは font-face-name 要素に対応する。 The SVGFontFaceNameElement interface corresponds to the ‘font-face-name’ element.

SVG DOM を通した font-face-name 要素の属性に対するオブジェクト指向アクセスは提供されていない。 Object-oriented access to the attributes of the ‘font-face-name’ element via the SVG DOM is not available.

interface SVGFontFaceNameElement : SVGElement {
};