html5 svg 第八章文字text

虽然它可能是真实的，每一个画面讲述了一个故事，这是完全正确的，用言语来帮助讲故事。因此，SVG有几个元素，让你将文本添加到您的图形。

文本术语Text Terminology

在我们调查的主要方法添加文本，的<TEXT>元素之前，我们应该定义一些术语，你会看到，如果你读了SVG规范，或者如果你的工作与文字在任何图形环境：

字符: 一个字符，作为一个XML文档而言，是一个数值，根据Unicode标准的一个字节或字节。举例来说，就是我们所说的字母“G”是字符的Unicode值103。

雕文: 字形是可见的一个或几个字符表示。一个字符可以有许多不同的字形来代表它。图8-1 显示了“两套不同的字形-特别是在最初的”G“字形” -这是相同的字符，但字形明显不同

两套字形(glyphs glyphs)

多个字符，可以减少单个字形，有些字体有独立的字形，字母组合“FL”和“FF”，以使他们的间距看起来更好（这些被称为连字）。其他时间，可以单个字符组成的多个字形打印程序可能会造成字符E（Unicode值233）与非间距重音符号“'”相结合的“e”字形。

字形

字形的集合代表一个特定的字符集。所有字体中的字形，一般都有以下共同的特点：

基线，上升和下降 Baseline, ascent, and descent: 所有的字形字体线基线。的距离从基线到字符顶部的提升，从基线到字符的底部的距离是下降。的字符的总高度也被称为电磁高度 The total height of the character is also called the em-height.。烯框中，然后是一个正方形，有作为烯高度的宽度一样大。
上虚线在图8-2是用来确定帽的高度，这是一个大写字母在基线以上的高度。的较低的虚线是用来确定前的高度，其中，逻辑的是，从基线到小写字母“×的顶部的距离是。

简单的属性和属性的文本元素

<text>元素最简单的形式，只需要两个属性x和y，它定义了元素的内容的第一个字符的基线baseline被放置的位置,文本的默认样式是有黑色，没有轮廓的填充颜色。事实证明这真实你想要的文本颜色。如果你设置的轮廓，以及作为填充，文字看起来不舒服厚。如果您只设置的轮廓，你可以得到一个相当愉快的字形轮廓，特别是如果你降低中风的宽度。例8-1<文本>使用的位置和中风/填充特性，其结果是图8-3。

例8-1。文字布局和概述

<!-- guide lines -->
<path d="M 20 10, 20 120 M 10 30 100 30 M 10 70 100 70
   M 10 110 100 110" style="stroke: gray;"/>

<text x="20" y="30">Simplest Text</text>
<text x="20" y="70" style="stroke: black;">Outlined/filled</text>
<text x="20" y="110" style="stroke: black; stroke-width: 0.5;
    fill: none;">Outlined only</text>

许多其他属性应用于文本的相同的，因为他们是"层叠样式表"标准中。下面是 in the Apache Batik viewer version 1.0中实现css属性和值的列表

字体家庭font-family

该值是一个空白分隔的列表的字体系列名称或通用的姓氏。通用的家族名是衬线字体，无衬线和等宽。很少有衬线字体笔画的两端的“挂钩”不无衬线字体。在图8-1中，字的左边是一个serif字体和字，右边是无衬线字体。衬线和无衬线字体是成正比的，一个大写M的宽度为一，资本等宽字体，可能会或可能不会有衬线之一，也是所有字形具有相同的宽度的宽度是不一样的像一台打字机的字母。

字体大小font-size

该值是基线到基线距离的字形，如果你有一个以上的一行文字。（SVG，可以没有多线<TEXT>内容，这样的概念有点抽象。）如果您使用此属性的单位，风格=“字体大小：18PT”，18点的大小将被转换为用户单位在渲染之前，因此它可以被变换的影响。

字体重量font-weight

最常用的两种属性的值是bold和normal。

字体风格font-style

最常用的两种属性的值是斜体和正常。italic andnormal.

文字装饰text-decoration

可能这个属性的值是没有none，下划线underline，上划线overline，线通过line-through.

字间距word-spacing

此属性的值是一个长度，无论是在明确的单位，如PT或用户单位。让这个正数，字与字之间的空间增加，将它设置为正常，保持正常的空间，或使其负收紧字与字之间的空间。指定的长度被添加到正常的间距。increasenormal

Make this a positive number to increase the space between words, set it to normal to keep normal space, or make it negative to tighten up the space between words.

字母间距letter-spacing

此属性的值是一个长度，无论是在明确的单位，如PT或用户单位。请这是一个正数，增加个别字母之间的空间，将其设置为正常，保持正常的空间，或使其负收紧字母之间的空间。指定的长度被添加到正常的间距。

例8-2中使用这些样式图8-4，你期望任何主管的文本应用程序的效果。

例8-2。文字重量，样式，装饰，和间距属性

更多相关文章

随机推荐

html5 svg 第八章 文字text

更多相关文章

随机推荐

html5 svg 第八章文字text