SVG font-weight 属性

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的图形格式，与传统的栅格图像（如JPEG或PNG）不同。在编写SVG代码时，可以使用CSS属性来控制显示效果。其中，font-weight 属性用于设置文本的粗细程度。

语法

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

• normal：标准字体，相当于400。
• bold：加粗字体，相当于700。
• bolder：更加粗的字体，比bold更粗，但不是固定值，视字体而定。
• lighter：更加细的字体，比normal更细，但同样不是固定值。
• 数字值（100-900）：表示字体粗细的相对大小。一般情况下，400相当于normal，700相当于bold，其余值可以根据需求自行设定。

代码示例

可以使用font-weight属性为SVG文本设置不同的字体粗细程度，例如：

<svg>
  <text x="30" y="50" font-size="20" font-weight="normal">普通字体</text>
  <text x="30" y="80" font-size="20" font-weight="bold">加粗字体</text>
  <text x="30" y="110" font-size="20" font-weight="700">也可以使用数字值设置</text>
</svg>

这段代码将在SVG中创建三个文本元素，分别为普通字体、加粗字体和数字值设置的字体。其中，前两个属性值分别为normal和bold，而第三个则直接设置为700，效果是一样的。

注意事项

• font-weight属性只对可缩放字体（scalable font）有效，在使用非可缩放字体（bitmap font）时不起作用。
• 不同字号的文本具有不同的字体轮廓，因此使用font-weight属性设置字体粗细时要特别注意字号的设定，以便获得最佳效果。
• 除了font-weight属性，还可以使用font-style属性来设置文本的样式，例如normal、italic或oblique等。