css font属性简写

css font属性简写

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<style>

 .box{padding:40px; border:1px solid pink;}

 .f30{font-size:30px;}

 .lh50{line-height:50px;}

 .bold{font-weight:bold;}

 .roman{font-family:'Times News Roman';}

 .songti{font-family:宋体;}

 .italic{font-style:italic;}

 .fz{font:12px;}

 .fzl{font:12px/30px;}

 b{color:red;}

 .fzlff{font:12px/30px 宋体;}

 .fzff{font:12px 宋体;}



 h2{padding:20px; background:#aaa; color:#fff; font:20px/30px arial;}

</style>

</head>

<body>

    <div class="f30 lh50 bold roman italic box">

    font简写测试,这是父容器的字体

    <p class="p box">这是子元素的字体 默认继承了哪些字体属性 font-style font-weight font-size/line-height font-family都从父元素继承了</p>

    <p class="fz box">这是用font:12px定义的文本 <b>语法错误</b></p>

    <p class="fzl box">这是用font:12px/30px定义的文本<b>语法错误</b></p>

    <p class="fzff box">这是用font:12px 宋体 定义的文本</p>

    <p class="fzlff box">这是用font:12px/30px 宋体 定义的文本<b>正确</b></p>

    <h2>font:[font-style] [font-variant] [font-weight] font-size/[line-height] font-family 简写语法,注意必选和可选,省略的定义会采用默认值, 结论:如果要定义字体的多个样式 建议简写(font-size  font-family是必须的),如果只是修改一个样式,直接写比较好一点</h2>

    </div>

</body>

</html>

 

你可能感兴趣的:(font)