字符
:在
XML
文档中,字符是指带有一个数字值的一个或多个字节,数字值与
Unicode
标准对应。例如,字母
g
是
Unicode
值为
103
的字符。
符号
:符号(
glyph
)是指字符的
视觉呈现
。每个字符都可以用很多不同的符号来呈现。
一个符号可能由多个字符构成。一些字体为特定的字母组合(如fl和ff)准备了单独的符号,以使它们更好看,这种特性叫作“连字”(ligature)。有时候,一个字符也可能由几个符号组合而成,比如打印程序可能会组合符号e和重音符号(ˊ)来打印字符é(Unicode 值为 233)。
字体
:字体是指代表某个
字符集合
的一组符号。
基线
:字体中的所有符号以基线对齐。需要注意的是,
中文字体中的基线概念并没有西文字体那么明确
。
上坡度
:基线到字体中最高字符顶部的距离称为上坡度(
ascent
)。
下坡度
:基线到最深字符底部的距离称为下坡度(
descent
)。
em高度
:字符的总高度为上坡度和下坡度之和,也称为em高度。
em box
:指宽度为em高度的方块。
大写字母高度
:大写字母高度(
cap-height
)是指基线上的大写字母的高度。
x高度
:指基线到小写字母
x
顶部的高度。
x 高度通常能比em高度更好地衡量一个字体的尺寸和可读性
。
svg
字体的基本属性与
css
的属性基本一致:
font-family:
font-size:
font-weight:
font-style:
text-decoration:
word-spacing:
letter-spacing:
可以通过
writing-mode
属性(
css3
中也有这个属性)来设置文本排列的方向,如从右往左,从上往下等等;不过在svg中
writing-mode
属性使用的选项值是按照
IE
的规则:
1
|
-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb
|
不过在实际使用中这些属性值貌似不是每一个都被支持,只有
tb
(
top to bottom
,纵向排列)是被支持的:
可以通过设置
<text>
元素的
x
,
y
属性来确定文本的起点位置,而根据不同的对齐方式,字体符号所呈现的方式有所不同;可以通过
text-anchor
属性来设置文本与起点坐标的关系,
text-anchor
属性有以下几个选项:
start(默认值)
:以文本从左往右排列为例,
x
表示该文本第一个符号的
em box
的左侧位置,而
y
表示基线位置;
middle
:同理,
x
表示该文本的水平中点位置,而
y
表示基线位置;
end
:
x
表示该文本最后一个符号的
em box
的右侧位置,而
y
表示基线位置;
通过在
<text>
元素内使用
<textPath>
元素可以为文字指定一条
path
,并按照
path
的形状进行文字排列;使用方法如下:
1 2
|
<path d="M100 200h150 v100" id="pathID" fill="none"></path> <text><textPath xlink:href="#pathID">一段文字</textPath></text>
|
这样
textPath
内包含的文字就会按照所指定的
#pathID
路径进行排列,这里既可以指定定义在
<defs>
内的路径,也可以是实际出现过的路径;
需要注意的是只能是
<path>
元素所定义的路径,像诸如
<rect>
这样的基本形状是不能被指定为路径的
!
在
<text>
元素内文本并不会由于超过某一长度就会自动换行,也无法事先知道文本的终点在哪,但是可以通过
textLength
来控制文字的总长度(若文字原长度超过总长度也会被『压缩』在总长度内),并通过
lengthAdjust
属性来设置文本符号之间的间距和符号自身的大小;
lengthAdjust
属性有以下选项:
spacing(默认值)
:只调整符号之间的间距,而不会改变符号本身的尺寸大小;因此当设置的
textLength
小于文本原有长度时,字符的间距为『负』,也就是会被挤压重叠到一块:
spacingAndGlyphs
:间距和符号本身的大小一起调整,按比例缩放。
<tspan>
元素有点类似
html
中的行内元素
<span>
,可以用来对
<text>
内的一段文本进行单独调整;除了基本的文字样式之外,
<tspan>
元素还可以调整文本的位置和变形。
x,y
:指定绝对位置坐标;
dx,dy
:指定相对位置坐标;
需要注意的是,
设置以上属性会影响该
<tspan>
后面的文本
!
baseline-shift
:调整文本符号的
基线位置
,可以是一个长度值,也可以是
super
(上标)和
sub
(下标);该属性只会对
<tspan>
内产生作用!
rotate
:对
<tspan>
内的每个文本符号进行旋转(单独地?),单位为
度数
。
改变CSS世界纵横规则的writing-mode属性 « 张鑫旭-鑫空间-鑫生活
《SVG精髓(第2版)》