CSS | font-family 属性

CSS (层叠样式表) 中的 font-family 属性用于设置 HTML 元素中显示的文本字体。在编写网页的时候，选择合适的字体能够使页面的呈现更加美观、有层次感和专业感。

语法

selector {
  font-family: family-name | generic-family | initial | inherit;
}

值

• family-name：字体名称，可以是某个具体字体的名称，也可以是一个字体家族的名称，多个字体名称用逗号分隔；
• generic-family：通用字体家族名称，如 serif、sans-serif、monospace、cursive、fantasy，用于指定浏览器在找不到指定字体时使用的默认字体；
• initial：将属性设为它的默认值；
• inherit：从父元素继承属性值。

用法示例

使用具体字体名称

body {
  font-family: Arial, Helvetica, sans-serif;
}

上述代码设置了 body 元素的字体为 Arial，如果系统中没有该字体，则使用 Helvetica，还不存在该字体，则显示系统默认的 sans-serif 字体。

使用通用字体家族

p {
  font-family: serif;
}

上述代码设置了 p 元素的字体家族为 serif，即衬线字体。而具体显示的字体是取决于浏览器的特定实现。

继承父元素的字体族设置

h1 {
  font-family: inherit;
}

上述代码将 h1 元素的字体家族设置为与父元素相同的字体家族使用，即继承父元素的字体设置。

总结

在编写网页的过程中，使用合适的字体能够使得页面的文本内容更容易阅读、页面的风格更加优美。而在选择字体时，建议优先选择系统自带的字体，避免网页访问者在系统中没有相应字体时导致的字体显示异常。font-family 属性可以为所有 HTML 元素指定字体，通过具体字体名称、字体家族和通用字体家族名称等方式设置不同的字体，并支持从父元素继承字体属性值。

参考资料：

• MDN Web Docs