From 7d45ddd99ec8c2e14d3a47791d10949a4e4fb697 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 10 Jun 2021 00:14:17 +0900 Subject: Web/SVG/Tutorial/SVG_fonts を更新 (#1039) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/SVG/Tutorial/SVG_fonts を更新 - 英語版章題マクロを除去 - 2021/03/25 時点の英語版に同期 * リンク先を修正 --- files/ja/web/svg/tutorial/svg_fonts/index.html | 73 +++++++++++++++++--------- 1 file changed, 47 insertions(+), 26 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/svg/tutorial/svg_fonts/index.html b/files/ja/web/svg/tutorial/svg_fonts/index.html index c014e43836..5adfb9f834 100644 --- a/files/ja/web/svg/tutorial/svg_fonts/index.html +++ b/files/ja/web/svg/tutorial/svg_fonts/index.html @@ -1,18 +1,26 @@ --- -title: SVG Fonts -slug: Web/SVG/Tutorial/SVG_Fonts +title: SVG フォント +slug: Web/SVG/Tutorial/SVG_fonts tags: + - Advanced + - NeedsUpdate - SVG - - 'SVG:Tutorial' + - SVG:Tutorial translation_of: Web/SVG/Tutorial/SVG_fonts --- -

{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial/SVG_Image_Tag") }}

-

SVG で Web フォントのサポートが明示されたのは、それがずっと望まれていたからです。しかし画像のレンダリングには正しいフォントが重要であるため、SVG にフォントを定義する技術が追加されました。これは PostScript や OTF のような他のフォント形式と同じようなものを意図するのではなく、レンダリングエンジン向けにグリフ情報を埋め込む簡単な手段です。

-
ブラウザでの SVG フォントのサポートは、広く行われているとは言えません。Opera の他、WebKit ブラウザ (デスクトップおよびモバイル) だけがフォントを表示できます。Firefox は WOFF へ集中するために、SVG フォントの実装を無期限に延期しました。しかし他のツール、たとえば Adobe SVG Viewer、Batik、Inkscape の一部は SVG フォントをサポートしています。
-

SVG フォントを定義するための基盤は {{ SVGElement("font") }} 要素です。

-

{{ 英語版章題("Defining a font") }}

-

フォントの定義

-

フォントに必要なすべての情報を得ることに、連携して関わる要素がいくつかあります。始めに (仕様書 で示されている) 宣言の例、その後に詳しい説明を示します。

+

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

SVG が規定された時点では、ブラウザーでウェブフォントの対応は普及していませんでした。しかし、テキストを正しく描画するためには、正しいフォントファイルへのアクセスが不可欠であるため、この機能を提供するためにフォント記述技術が SVG に追加されました。これは PostScript や OTF などの他のフォーマットとの互換性を目的としたものではなく、レンダリング時にグリフ情報を SVG に埋め込む簡単な手段です。

+ +
SVG フォントは、現在 Safari と Android ブラウザーのみが対応しています。
+Internet Explorer は実装を検討しておらず、 Chrome 38 (および Opera 25) では機能がら削除されており、 Firefox は WOFF に集中するために実装を無期限に延期しています。しかし、 Adobe SVG Viewer プラグインや Batik、 Inkscape の一部など、他のツールは SVG フォントの埋め込みに対応しています。
+ +

SVG フォントを定義するためのベースは {{ SVGElement("font") }} 要素です。

+ +

フォントの定義

+ +

フォントに必要なすべての情報を得ることに、連携して関わる要素がいくつかあります。始めに (仕様書 で示されている) 宣言の例、その後に詳しい説明を示します。

+ 
<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"
@@ -28,17 +36,26 @@ translation_of: Web/SVG/Tutorial/SVG_fonts
   <!-- more glyphs -->
 </font>
+

まずは {{ SVGElement("font") }} 要素から始まります。これは id 要素を持っており、それは URI を通してフォントを参照する (後述) ために必要です。horiz-adv-x 属性は 1 つのグリフのパス定義に比べて、文字の幅を平均してどのくらい広げるかを定義します。値 1000 は、作業を行うにあたりほどよい値を設定します。また、基本的なグリフボックスのレイアウトをさらに定義するための付随的な属性がいくつかあります。

-

{{ SVGElement("font-face") }} 要素 CSS の @font-face 宣言と対になるものです。これはフォントウェイトやフォントスタイルの分類など、最終的なフォントの基本的なプロパティを定義します。前出の例で最も重要で、最初に定義するものは font-family です。この値は、CSS や SVG の font-family プロパティで参照することができます。font-weight および font-style 属性は、同じ目的を持ちます。その後に続く属性は、フォントレンダリングエンジンへのレンダリング指示になります。例えば、グリフ全体の高さを表すのがアセンダです。

-

font-face 要素の子要素である {{ SVGElement("font-face-src") }} 要素は、CSS の @font-face 宣言の src プロパティに対応します。子要素の {{ SVGElement("font-face-name") }} や {{ SVGElement("font-face-uri") }} を用いて、フォントの宣言で外部のソースを指し示すことができます。前出の例では、レンダラーの手元に "Super Sans Bold" という名前のローカルフォントが存在する場合は、そのフォントを用いるべきであることを示します。

-

{{ SVGElement("font-face-src") }} の後に {{ SVGElement("missing-glyph") }} 要素があります。これはあるグリフがフォント内で見つからず、またフォールバックする仕組みもない場合に何を表示するべきかを定義します。またこの要素では、どのようにグリフを作成するかも示しています。単純にグラフィックの SVG コンテンツを内部に追加するのです。また、{{ SVGElement("filter") }}、{{ SVGElement("a") }}、あるいは {{ SVGElement("script") }} といった、他の SVG 要素もここで用いることができます。ただし単純なグリフを作るなら、path 要素の場合と同じ働きである d 属性を追加することもできます。

+ +

{{ SVGElement("font-face") }} 要素 CSS の @font-face 宣言と対になるものです。これはフォントウェイトやフォントスタイルの分類など、最終的なフォントの基本的なプロパティを定義します。前出の例で最も重要で、最初に定義するものは font-family です。この値は、CSS や SVG の font-family プロパティで参照することができます。font-weight および font-style 属性は、同じ目的を持ちます。その後に続く属性は、フォントレンダリングエンジンへのレンダリング指示になります。例えば、グリフ全体の高さを表すのがアセンダーです。

+ +

子要素である {{ SVGElement("font-face-src") }} 要素は、CSS の @font-face 宣言の src プロパティに対応します。子要素の {{ SVGElement("font-face-name") }} や {{ SVGElement("font-face-uri") }} を用いて、フォントの宣言で外部のソースを指し示すことができます。前出の例では、レンダラーの手元に "Super Sans Bold" という名前のローカルフォントが存在する場合は、そのフォントを用いるべきであることを示します。

+ +

{{ SVGElement("font-face-src") }} の後に {{ SVGElement("missing-glyph") }} 要素があります。これはあるグリフがフォント内で見つからず、またフォールバックする仕組みもない場合に何を表示するべきかを定義します。またこの要素では、どのようにグリフを作成するかも示しています。単純にグラフィックの SVG コンテンツを内部に追加するのです。また、{{ SVGElement("filter") }}、{{ SVGElement("a") }}、あるいは {{ SVGElement("script") }} といった、他の SVG 要素もここで用いることができます。ただし単純なグリフを作るなら、標準の SVG パスと同様に d 属性を追加することもできます。

+

実際のグリフは {{ SVGElement("glyph") }} 要素で定義します。ここで最も重要な属性は unicode です。この属性は Unicode のコードポイントを定義して、その文字が glyph 要素で示すグリフで表現されます。lang 属性を指定した場合は、さらにグリフを特定の言語 (フォントを使用する側の xml:lang で示されます) のみに限定することができます。繰り返しになりますがグリフを定義するために任意の SVG を用いることができ、またユーザエージェントが対応するすばらしいエフェクトを用いることもできます。

-

font 内で定義することができる要素がさらに 2 つあり、それは {{ SVGElement("hkern") }} と {{ SVGElement("vkern") }} です。それぞれの実体は少なくとも 2 つの文字を参照し、また k 属性はそれらの文字の間の距離をどれだけ縮めるかを定義します。初歩的な例は "A" と "V" であり、レンダラーは "AV" という文字列を、単独の文字が暗に定義する距離よりも間隔を狭くして配置します。

+ +

font の内部では、さらに {{ SVGElement("hkern") }} と {{ SVGElement("vkern") }} の 2 つの要素を定義することができます。それぞれ、少なくとも 2 つの文字 (u1 および u2 属性) への参照と、それらの文字間の距離をどの程度縮めるかを決定する属性 k を持ちます。以下の例では、ユーザーエージェントに "A" と "V" の文字を標準的な文字間の距離よりも近づけるように指示しています。

+ 
<hkern u1="A" u2="V" k="20" />
-

{{ 英語版章題("Referencing a font") }}

-

フォントの参照

+ +

フォントの参照

+

これはとても単純です。これまで説明したようにフォントの宣言をひとまとめに収めた場合は、font-family 属性を用いるだけでよいのです。

+ 
<font>
   <font-face font-family="Super Sans" />
   <!-- and so on -->
@@ -46,10 +63,13 @@ translation_of: Web/SVG/Tutorial/SVG_fonts
 
 <text font-family="Super Sans">My text uses Super Sans</text>
+

ただし、どこでどのようにフォントを定義するかの自由のために、複数の方法を自由に組み合わせてもかまいません。

-

{{ 英語版章題("Option:_Use_CSS_.40font-face") }}

-

オプション: CSS @font-face の利用

-

リモートの (またはリモートでない) フォントの参照に @font-face を用いることができます。

+ +

オプション: CSS @font-face の利用

+ +

リモートの (またはリモートでない) フォントの参照に @font-face を用いることができます。

+ 
<font id="Super_Sans">
   <!-- and so on -->
 </font>
@@ -61,11 +81,12 @@ translation_of: Web/SVG/Tutorial/SVG_fonts
 }
 </style>
 
-<text font-family="Super Sans">My text uses Super Sans</text>
-
-

{{ 英語版章題("Option: reference a remote font") }}

-

オプション: リモートフォントの参照

-

前に述べた font-face-uri で外部のフォントを参照することができ、高い再利用性を得ることができます。

+<text font-family="Super Sans">My text uses Super Sans</text> + +

オプション: リモートフォントの参照

+ +

前に述べた font-face-uri で外部のフォントを参照することができ、高い再利用性を得ることができます。

+ 
<font>
   <font-face font-family="Super Sans">
     <font-face-src>
@@ -74,5 +95,5 @@ translation_of: Web/SVG/Tutorial/SVG_fonts
   </font-face>
 </font>
-

{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial") }}

-

{{ languages( { "en": "en/SVG/Tutorial/SVG_Fonts"} ) }}

+ +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

-- cgit v1.2.3-54-g00ecf