font和line-height之CSS代码书写顺序不同，导致显示效果不一样

前端开发中，CSS是非常重要的一部分，其中字体和行高是常用的样式属性。其中，CSS代码的书写顺序很重要，有时会导致样式不符合预期。下面我将为您详细讲解“font和line-height之CSS代码书写顺序不同，导致显示效果不一样”的完整攻略。

1. font属性与line-height属性的不同表示方式

font属性是指定字体、字形和字体大小的一组属性，常常可以使用以下定义方式之一：

font-size: 16px;
font-family: Arial, sans-serif;
font-style: italic;
font-weight: bold;

这些属性可以整合到一个规则里，形成一个声明：

font: italic bold 16px/1.2 Arial,sans-serif;

其中1.2是line-height 属性,它的数值表示行高与字号的比例。

而 line-height 属性则是指定行高的。line-height 的单位通常是em，百分数或像素。例如，下面的例子会把一个段落的行高设置成1.5倍的字体高度：

p {
  font-size: 16px;
  line-height: 1.5em;
}

1. 代码书写顺序不同

当我们在写CSS代码时，如果font属性和line-height属性的书写顺序不同，会导致样式的显示效果出现差异。

下面举两个例子：

例一：line-height在font之前

当先定义行高，后定义字体属性时，字体尺寸会改变，但行高不会变，因为行高的定义在font的定义之前。如以下示例所示：

p {
  line-height: 2em;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
}

例二：font在line-height之前

当先定义字体属性，后定义行高时，行高会改变，但字体的属性不会改变，因为行高的定义在font之后。如以下示例所示：

p {
  font: italic bold 16px/1.2 Arial,sans-serif;
  line-height: 2em;
}

1. 总结

因此，在编写CSS代码时，定义font和line-height属性时，需要注意书写顺序，以确保样式属性的正常显示。如果您想要设置多个样式属性，请使用正确的语法和书写顺序，例如，将font和line-height属性整合到一个规则里。

希望以上攻略能够对您有所帮助。