font-weight: bold;来设置字体加粗。CSS 字体加粗是一种常见的样式调整，用于强调文本内容，在 CSS 中，可以通过多种方式实现字体加粗效果，包括使用font-weight 属性、伪类选择器以及结合其他 CSS 属性等，本文将详细介绍几种常见的方法，并通过示例代码演示如何应用这些技术来实现字体加粗。
使用 `font-weight` 属性
font-weight 是 CSS 中用于设置字体粗细的属性，它接受不同的值，从最细的 "100" 到最粗的 "900"，以及一些关键字如 "normal", "bold", "bolder", "lighter"，最常见的值是 "normal"（默认值）和 "bold"（加粗）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Weight Example</title>
<style>
.normal-text {
font-weight: normal;
}
.bold-text {
font-weight: bold;
}
</style>
</head>
<body>
<p class="normal-text">这是正常字体的文本。</p>
<p class="bold-text">这是加粗字体的文本。</p>
</body>
</html> 使用相对单位
除了绝对值外，font-weight 还可以使用相对单位 "bolder" 和 "lighter"。"bolder" 会使字体比父元素的字体更粗一级，而 "lighter" 则会使其更细一级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Font Weight Example</title>
<style>
.relative-bolder {
font-weight: bolder;
}
.relative-lighter {
font-weight: lighter;
}
</style>
</head>
<body>
<p>这是父元素字体的文本。</p>
<p class="relative-bolder">这是比父元素更粗的字体。</p>
<p class="relative-lighter">这是比父元素更细的字体。</p>
</body>
</html> 使用数值
font-weight 也可以接受数值，范围从 100 到 900，数值越大，字体越粗。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numeric Font Weight Example</title>
<style>
.numeric-weight-400 {
font-weight: 400; /* 相当于 normal */
}
.numeric-weight-700 {
font-weight: 700; /* 相当于 bold */
}
</style>
</head>
<body>
<p class="numeric-weight-400">这是数值为 400 的字体。</p>
<p class="numeric-weight-700">这是数值为 700 的字体。</p>
</body>
</html> 使用伪类选择器
CSS 伪类选择器可以与font-weight 结合使用，以特定条件下改变字体粗细，当鼠标悬停在元素上时，可以使用:hover 伪类来改变字体粗细。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Font Weight Example</title>
<style>
.hover-bold:hover {
font-weight: bold;
}
</style>
</head>
<body>
<p class="hover-bold">将鼠标悬停在此文本上，字体会变粗。</p>
</body>
</html> 表格中的字体加粗
在表格中使用font-weight 可以突出显示某些单元格的内容，以下是一个示例，展示如何在表格中使用不同的字体粗细。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Font Weight Example</title>
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
.header {
font-weight: bold;
background-color: #f2f2f2;
}
.highlight {
font-weight: bolder;
background-color: #e6ffe6;
}
</style>
</head>
<body>
<table>
<tr>
<th class="header">Header 1</th>
<th class="header">Header 2</th>
</tr>
<tr>
<td>Normal Text</td>
<td class="highlight">Highlighted Text</td>
</tr>
<tr>
<td class="highlight">Another Highlighted Text</td>
<td>Normal Text</td>
</tr>
</table>
</body>
</html> 常见问题解答 (FAQs)
Q1: 如何取消 CSS 中的字体加粗？
A1: 你可以使用font-weight: normal; 来取消字体加粗。
.no-bold {
font-weight: normal;
} 在 HTML 中应用这个类即可：
<p class="no-bold">这段文本不会加粗。</p>
Q2: 如何在 CSS 中同时应用多种字体粗细？
A2: 你可以使用逗号分隔多个值来同时应用多种字体粗细。
.multiple-weights {
font-weight: bold, lighter;
} 这样，浏览器会尝试应用第一个可用的粗细，如果不支持，则尝试下一个。
小伙伴们，上文介绍了“css字体加粗”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1323145.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复