Problems with the font attribute in css and its solutions

Attribute definition and usage instructions

Font abbreviation attribute Set all font properties in one statement.

The properties that can be set are (in order):

“font-style font-variant font-weight font-size / line-height font-family”

Values ​​for font size and font family are required. If other values ​​are missing, the default value will be inserted, if one exists.

Problems with the font attribute in css, font and line height

The font-size is set first, and the line is set later. -height; I just tested it in chrome, and writing font: 10px/1.5em; alone is invalid. But just add font-family at the end. For example: font: 10px/1.5em arial,verdana; or font: 10px/1.5em ""; is also valid. The abbreviation attribute in front of font does not need to be written, but the font-family attribute must be written otherwise it will be invalid. Complete font abbreviation attribute font:italic small-caps bold 12px/1.5em arial,verdana; It is recommended to just set the line height and font size. There is no need to use the abbreviation attribute. You can refer to bootstrap's suggestions for using abbreviated attributes.

Why co-writing font in css doesn’t work

body{
font:62.5% Arial, Helvetica, sans-serif,"宋体";
}
.nav li{
font:1.6em/54px;
}
"font:1.6em/54px"不管用

把font:1.6em/54px改为font:54px/1.6em;即可，建议书写完整。
简写顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
简写格式：
font:italic small-caps bold 12px/1.5em arial,verdana;
说明：简写时font-size和line-height，只能通过斜杠/组成

The above is the detailed content of Problems with the font attribute in css and its solutions. For more information, please follow other related articles on the PHP Chinese website!