跳到主要内容

字体样式与字体族

font-family 如何选择字体？​

  • 按声明顺序查找可用字体;
  • 用逗号分隔多个候选;
  • 建议以通用族 (serif/sans-serif/monospace) 兜底;
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

字体大小如何设置？​

  • 属性: font-size;
  • 取值: 关键字 (xx-small/larger)、绝对长度 (24pt)、百分比 (200%);
.small {
  font-size: xx-small;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

font-style 如何设置字体样式？​

.normal {
  font-style: normal;
}
.italic {
  font-style: italic; /* 斜体字形 */
}
.oblique {
  font-style: oblique; /* 人为倾斜 */
}

font-weight 如何设置字重？​

  • 关键字: normal 对应 400, bold 对应 700;
  • 数值: 100~900, 如 600;
  • lighter: 相对父级更细;
p {
  font-weight: bold;
}
div {
  font-weight: 600;
}
span {
  font-weight: lighter;
}

字体颜色如何设置？​

  • 属性: color;
.serif {
  color: red;
}

网络安全字体是什么？​

  • web safe fonts: 多数设备默认可用的字体;
  • 常见组合:
    • serif: Times New Roman;
    • sans-serif: Arial;
    • monospace: Courier New;