diff options
Diffstat (limited to 'files/zh-cn/web/svg/tutorial/svg_fonts/index.html')
| -rw-r--r-- | files/zh-cn/web/svg/tutorial/svg_fonts/index.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/tutorial/svg_fonts/index.html b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..0ff198dcff --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,94 @@ +--- +title: SVG 字体 +slug: Web/SVG/Tutorial/SVG_fonts +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> + +<p>当规定SVG时，在浏览器支持web字体并不流行。因为访问正确的字体文件对于正确呈现字体是有确定性的，SVG中添加了一个字体描述技术，以提供这个能力。它并不是为了和别的格式比如说PostScript或OTF兼容，而是为了将字形信息嵌入SVG呈现的一个简单的方法。</p> + +<div class="note"><strong>SVG字体当前只在Safari和Android浏览器中受支持。</strong><br> +Internet Explorer<a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">还没有考虑实现它</a>，Chrome 38（和Opera25）<a href="https://www.chromestatus.com/feature/5930075908210688">移除了这个功能</a>，Firefox已经<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">无限期推迟实施它</a>以专心实现<a href="/en/WOFF">WOFF</a>。别的工具比如说<a href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>插件、Batik和部分Inkscape支持SVG字体嵌入。</div> + +<p>定义一个SVG字体的基础是{{ SVGElement("font") }}元素。</p> + +<h2 id="定义一个字体">定义一个字体</h2> + +<p>在SVG中嵌入一个字体，有一些原料要求。让我们用一个示例演示它（来自<a href="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属性，使它能够通过一个<code>URI</code>被引用（如下所示）。属性<code>horiz-adv-x</code>定义了相比之单一字形的路径定义，一个字符的平均宽度。值<code>1000</code>设置了一个起作用的合理值。有一些陪同的属性，帮助进一步定义基本的字形盒布局。</p> + +<p>{{ SVGElement("font-face") }}元素在SVG中等同于CSS的 <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a> 声明。它定义了最终字体的基本属性，比如说weight、style，等等。在上面这个示例中，最重要的是定义<code>font-family</code>，后面的CSS和SVG <code>font-family</code>属性可以引用它的值。属性<code>font-weight</code>和<code>font-style</code>跟CSS中的描述符有同样的目的。所有后面的属性都是字体布局引擎的呈现指令，举个例子，字形的全部高度可以<a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">提升</a>多少。</p> + +<p>它的子元素，{{ 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内容。你可以在这里使用任何其它的SVG元素，甚至是 {{ SVGElement("filter") }}元素、{{ SVGElement("a") }}元素或者 {{ SVGElement("script") }}元素。然而，为了简化字形，你可以简单添加一个属性<code>d</code>——它精确定义了字形的形状，就像标准SVG路径所做的那样。</p> + +<p>真正的字形是用{{ SVGElement("glyph") }}元素定义的。它最重要的属性是<code>unicode</code>。它定义了表达这个字形的unicode代码点。如果你还在一个字形上指定了{{htmlattrxref("lang")}}属性，你可以更进一步专门限定它为特定的语言（由目标上的<code>xml:lang</code>属性表达）。而且，你可以使用任意的SVG来定义这个字形，它允许用户代理所支持的很多效果。</p> + +<p>有两个进一步的元素，可以定义在<code>font</code>元素里面：{{ SVGElement("hkern") }}元素和{{ SVGElement("vkern") }}元素。这两个元素每个引用到至少两个字符（属性u1和属性u2）以及一个属性k。属性k决定了那些字符之间的距离应该减少多少。下面的示例指示用户代理把“A”和“V”字符放得比标准的字符间距更靠近一些。</p> + +<pre><hkern u1="A" u2="V" k="20" /> +</pre> + +<h2 id="引用一个字体">引用一个字体</h2> + +<p>如果你已经把你的字体声明如上放在一起，你可以使用一个单一的<code>font-family</code>属性以实现在SVG文本上应用字体：</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> + +<h3 id="选项：使用CSS_font-face">选项：使用CSS @font-face</h3> + +<p>你可以使用<code>@font-face</code>以引用远程（或者非远程）字体：</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> + +<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("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p> |