如何使用CSS设置文本字体粗细？

EVDA • 2024-10-22 23:33 • 编程

在CSS中，可以通过font-weight属性来设置文本的字体粗细程度。该属性可以选择的值有:

/* 正常字体 */
font-weight: normal;

/* 加粗字体 */
font-weight: bold;

/* 数字值表示粗细程度，400为正常，700为加粗 */
font-weight: 400;
font-weight: 700;

只需要将该属性写在需要设置字体粗细的元素的CSS样式中即可生效。

除了使用font-weight属性，还可以通过选择不同的字体来实现字体加粗的效果。如下所示：

/* 常规字体 */
font-family: "Microsoft YaHei", sans-serif;

/* 加粗字体 */
font-family: "Microsoft YaHei Bold", sans-serif;

在上面的代码中，”Microsoft YaHei”代表常规字体，”Microsoft YaHei Bold”代表加粗字体。当需要将文本字体加粗时，只需要将CSS样式中的font-family属性修改即可。

有时候，我们需要将文本中的某个部分加粗来进行强调，在这种情况下，可以使用标签将该部分文本包裹起来，并设置样式来进行加粗。如下所示：

<p>这是一个<span style="font-weight:bold">加粗的</span>文本</p>

在上面的代码中，使用了span标签来包裹需要加粗的文本，同时使用了CSS样式的font-weight属性来设置加粗效果。

在某些情况下，我们需要使用一些特殊的字体来进行文本展示，而这些字体并不是浏览器原生支持的。此时，可以使用@font-face来加载自定义字体文件，并使用该字体来进行文本展示。如下所示：

@font-face {
    font-family: "MyFont"; /* 自定义字体名称 */
    src: url("myfont.ttf"); /* 字体文件路径 */
}

p {
    font-family: "MyFont"; /* 使用自定义字体 */
}

在上述代码中，首先通过@font-face声明了自定义字体，其中font-family指定了字体名称，src指定了字体文件路径。之后，在需要使用自定义字体的地方，只需要将CSS样式中的font-family属性设置为对应的字体名称即可。

在CSS中，可以通过font-weight属性、字体选择、使用span标签和@font-face加载自定义字体等方式来设置文本的字体粗细。根据具体需求选择不同的方法，可以使文本显示效果更加清晰、美观。

原创文章，作者：EVDA，如若转载，请注明出处：https://www.506064.com/n/143472.html