字体属性

详细介绍SVG的字体属性，包括字体族、字体大小、字体粗细和字体样式。通过实例掌握SVG字体属性的设置技巧。 SVG支持丰富的字体属性，用于控制文本的字体外观，包括字体族、大小、粗细和样式等。

主要字体属性

font-family 字体族

font-family指定文本使用的字体，可以设置多个备选字体。

<text x="30" y="30" font-family="Arial" font-size="16" fill="#333">Arial 字体</text>
<text x="30" y="55" font-family="Georgia" font-size="16" fill="#333">Georgia 字体</text>
<text x="30" y="80" font-family="Times New Roman" font-size="16" fill="#333">Times New Roman</text>
<text x="30" y="105" font-family="Courier New" font-size="16" fill="#333">Courier New 字体</text>
<text x="30" y="130" font-family="Verdana" font-size="16" fill="#333">Verdana 字体</text>

字体回退

设置多个字体作为备选方案。

<text x="30" y="30" font-family="Helvetica, Arial, sans-serif" font-size="16" fill="#333">
  无衬线字体回退
</text>
<text x="30" y="55" font-family="Georgia, Times, serif" font-size="16" fill="#333">
  衬线字体回退
</text>

font-size 字体大小

font-size设置文本的大小，支持多种单位。

<text x="30" y="30" font-size="12" fill="#333">12px 字体</text>
<text x="30" y="55" font-size="16" fill="#333">16px 字体</text>
<text x="30" y="85" font-size="20" fill="#333">20px 字体</text>
<text x="30" y="120" font-size="28" fill="#333">28px 字体</text>

大小单位

font-weight 字体粗细

font-weight控制文本的粗细程度。

<text x="30" y="30" font-weight="100" font-size="16" fill="#333">font-weight: 100</text>
<text x="30" y="55" font-weight="300" font-size="16" fill="#333">font-weight: 300</text>
<text x="30" y="80" font-weight="normal" font-size="16" fill="#333">font-weight: normal (400)</text>
<text x="30" y="105" font-weight="500" font-size="16" fill="#333">font-weight: 500</text>
<text x="30" y="130" font-weight="bold" font-size="16" fill="#333">font-weight: bold (700)</text>
<text x="30" y="155" font-weight="900" font-size="16" fill="#333">font-weight: 900</text>

粗细值

font-style 字体样式

font-style设置文本的倾斜样式。

<text x="30" y="35" font-style="normal" font-size="18" fill="#333">normal 正常样式</text>
<text x="30" y="65" font-style="italic" font-size="18" fill="#3498db">italic 斜体</text>
<text x="30" y="95" font-style="oblique" font-size="18" fill="#e74c3c">oblique 倾斜</text>

font-variant 字体变体

font-variant控制小型大写字母等变体效果。

<text x="30" y="40" font-variant="normal" font-size="18" fill="#333">Normal Text</text>
<text x="30" y="75" font-variant="small-caps" font-size="18" fill="#3498db">Small Caps Text</text>

font 简写属性

font属性可以一次性设置多个字体属性。

<text x="30" y="40" font="italic bold 20px Georgia" fill="#333">简写字体属性</text>
<text x="30" y="75" font="normal 16px Arial, sans-serif" fill="#666">另一个示例</text>

简写语法

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

实用案例

标题样式

<text x="150" y="40" text-anchor="middle" font="bold 28px Arial" fill="#2c3e50">主标题</text>
<text x="150" y="70" text-anchor="middle" font="italic 18px Georgia" fill="#7f8c8d">副标题文字</text>
<text x="150" y="100" text-anchor="middle" font="14px Arial" fill="#95a5a6">正文内容描述文字</text>
<text x="150" y="130" text-anchor="middle" font="small-caps 12px Georgia" fill="#bdc3c7">SMALL CAPS NOTE</text>

代码字体

<text x="20" y="30" font-family="Courier New, monospace" font-size="14" fill="#2ecc71">&lt;svg&gt;</text>
<text x="30" y="50" font-family="Courier New, monospace" font-size="14" fill="#3498db">&lt;text&gt;Code&lt;/text&gt;</text>
<text x="20" y="70" font-family="Courier New, monospace" font-size="14" fill="#2ecc71">&lt;/svg&gt;</text>

Web字体

SVG可以使用CSS @font-face加载自定义Web字体。

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
}

<text font-family="CustomFont, sans-serif">自定义字体文本</text>