css好看的字体

/* 使用 Google Fonts 引入好看的字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  /* 设置全局字体为 Roboto */
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  /* 为标题设置更粗的字体权重 */
  font-weight: 700;
}

p {
  /* 为段落设置较轻的字体权重 */
  font-weight: 400;
  line-height: 1.6; /* 设置行高，使文本更易读 */
}

/* 示例：使用自定义字体样式 */
.custom-font {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  color: #333;
}

解释说明：

1. 引入 Google Fonts：通过 @import 规则从 Google Fonts 引入了名为 "Roboto" 的字体。Roboto 是一种现代且易读的无衬线字体，适用于网页设计。
2. 全局字体设置：将 body 的字体设置为 Roboto，并指定了默认的备用字体 sans-serif，以确保在 Roboto 加载失败时有备选方案。
3. 标题和段落的字体权重：为标题（h1 到 h6）设置了较重的字体权重（700），而段落（p）则使用较轻的字体权重（400），并设置了行高以提高可读性。
4. 自定义字体样式：定义了一个 .custom-font 类，可以应用于特定元素，以便根据需要调整字体大小和颜色。