定义系统字体的关键字
字体属性的以下值可以用作关键字：
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
他们将字体设置为用户操作系统上用于该特定类别的字体。
例如，如果我们指定“menu”值，则该元素上的字体将设置为使用操作系统上用于下拉菜单和菜单列表的相同字体。
这些关键字值只能与字体速记属性一起使用。
字体作为速记属性
在使用这个速记属性时，我们应该了解一些关于它的重要信息：
强制值
“font-size”和“font-family”值被认为是强制性的。
如果缺少这些值之一，则整个声明将被忽略。
可选值
其他五个值是可选的。
如果使用这些值之一，请注意它们必须位于声明中的“font-size”值之前，否则它们将被忽略。
font 和 font-stretch 属性
font-stretch 属性是 CSS3 中的新属性，如果我们在旧浏览器中使用它，整行将被忽略。
可选值的继承
如果省略可选值，它们将不会从其父元素继承值。
它们将恢复到初始状态。
CSS font 属性值说明
| 值 | 描述 |
|---|---|
| font-style | 定义字体样式。其默认值是正常的。 |
| font-variant | 定义字体变体。其默认值是正常的。 |
| font-weight | 定义字体重量。其默认值是正常的。 |
| font-size/line-height | 定义字体大小和线路高度。其默认值是正常的。 |
| font-family | 定义字体系列。其默认值取决于浏览器。 |
| caption | 用于字幕控件的字体（例如，按钮，下拉）。 |
| icon | 用于标记图标的字体。 |
| menu | 用于菜单（例如，下拉菜单和菜单列表）的字体。 |
| message-box | 在对话框中使用的字体。 |
| small-caption | 用于标记小控件的字体。 |
| status-bar | 用于窗口状态列中的字体。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;
字体属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font 属性示例</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>
使用斜体字体定义的字体属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font 属性示例</h2>
<p class="font1">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
<p class="font2">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
<p class="font3">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
<p class="font4">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
<p class="font5">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
</body>
</html>
font 属性示例，其中 font-size、font-weight 和 line-height 是可设置动画的：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>
font 属性是以下属性的简写属性：
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
我们可以按以下顺序设置所有属性：1. 字体样式，2. 字体变体，3. 字体粗细，4. 字体大小/行高，5. 字体系列。
line-height 属性用于设置行间距。
需要定义 font-size 和 font-family 属性的值。
如果缺少其中一个值，则使用其默认值。
未指定的 font-size 属性的所有单个值都将设置为其初始值。
| 初始值 | 属性的默认值。 |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 可继承 |
| 可动画的 | 是的。字体大小，字体重量，字体拉伸和线路高度是可动画的。 |
| 版本 | CSS1. |
| DOM 语法 | object.style.font = "talic normal bold 1em/140% "Lucida Grande", sans-serif"; |
日期：2020-06-02 22:14:32 来源：oir作者：oir