font-family 字体类型

基本语法

font-family: "字体名称", "后备字体1", "后备字体2", ...;

使用规则

多个字体: 用逗号分隔,设置后备字体
中文字体: 必须用双引号包裹
带空格的英文字体: 需要用引号包裹
系统字体: 通常需要用户计算机已安装

常用中文字体

/* 微软雅黑 */
font-family: "微软雅黑";

/* 宋体 */
font-family: "宋体";

/* 黑体 */
font-family: "黑体";

/* 楷体 */
font-family: "楷体";

常用英文字体

/* Times New Roman - 衬线字体 */
font-family: "Times New Roman", Times, serif;

/* Arial - 无衬线字体 */
font-family: Arial, Helvetica, sans-serif;

/* Georgia - 衬线字体 */
font-family: Georgia, serif;

/* Verdana - 无衬线字体 */
font-family: Verdana, Geneva, sans-serif;

字体族

字体族	说明	示例
`serif`	衬线字体	Times, Georgia
`sans-serif`	无衬线字体	Arial, Verdana
`monospace`	等宽字体	Courier New
`cursive`	手写体	Comic Sans MS

示例

<style>
  /* 中文字体 */
  .box1 {
    font-family: "微软雅黑";
  }

  /* 英文字体 + 后备字体 */
  .box2 {
    font-family: "Times New Roman", Times, serif;
  }
</style>
<body>
  <div class="box1">中文字体: 微软雅黑</div>
  <div class="box2">English Font: Times New Roman</div>
</body>

最佳实践

1. 设置后备字体

font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

2. 中英文混排

font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

3. 系统默认字体

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

学习要点

中文字体: 必须用双引号
后备字体: 用逗号分隔,依次尝试
常用中文字体: 微软雅黑、宋体
字体族: serif(衬线), sans-serif(无衬线)

css学习