📅 最后修改于: 2023-12-03 15:20:23.912000 🧑 作者: Mango
SVG（可缩放矢量图形）是一种可用于绘制矢量图像的 XML 标记语言。 与 HTML 不同，SVG 允许使用 CSS（层叠样式表）来控制元素的样式。 这包括文本元素的字体样式。 在 SVG 中，有几个属性可用于设置字体样式。 让我们来一起看看这些属性吧。
font-family 属性用于设置文本的字体系列。 可以使用逗号分隔的多个字体系列，这样如果第一个字体在用户计算机上不可用，则会尝试下一个字体系列。以下是示例代码：
<text x="50" y="50" font-family="Arial">Hello World!</text>
在上面的示例中，文本使用 Arial 字体。
font-size 属性用于设置文本的字号。 值可以是像素，pt（磅）或 em（相对于文本所在的元素的字号）。以下是示例代码：
<text x="50" y="50" font-size="24">Hello World!</text>
在上面的示例中，文本使用 24 像素的字号。
font-weight 属性用于设置文本的字体粗细。 值可以是 normal、bold 或使用数值的 100 到 900。以下是示例代码：
<text x="50" y="50" font-weight="bold">Hello World!</text>
在上面的示例中，文本使用粗体字体。
font-style 属性用于设置文本的字体样式。 值可以是 normal、italic 或 oblique。以下是示例代码：
<text x="50" y="50" font-style="italic">Hello World!</text>
在上面的示例中，文本使用斜体字体。
text-decoration 属性用于向文本添加装饰，例如下划线或删除线。以下是示例代码：
<text x="50" y="50" text-decoration="underline">Hello World!</text>
在上面的示例中，文本使用下划线。
以上是 SVG 字体样式属性的基本介绍，使用这些属性可以创建具有丰富字体样式的 SVG 文本。