CSS_字体

字体

属性名: font

• 详细属性:

  • font-size : 字体大小
    每个浏览器都有各自的默认值, 自己平时书写css时, 尽可能避免极限值
  • font-family : 字体家族
  • font-weight: bold | normal 加粗
  • font-style: italic | normal 倾斜

• 行高属性:

  • line-height 上下文的行间距
  • 行高常用写法: 利用行高做 垂直居中
    当前元素有多高, 一般行高就多高

• 简写:
  font: size family;
font: weight style size/line-height family;

• 手册写法:
  font: [weight | style] size[/line-height] family;
  [] 代表可以省略其中的内容
  | 代表先后顺序可以颠倒

注意:

• size + family最基本的简写(size必须在前, family必须在最后)
• weight 和 style 可以省略, weight和style的先后顺序可以颠倒
• line-height 可以省略, 必须写在size的后面,中间需要一个 / 手心杠

<style>
       p{
            /* font-size: 14px;
            font-family: 黑体;
            font-family: 黑体, 楷体, "Micro Yahei"; */
            /* font:  20px 楷体; */
           /*不可这样子写:*/
           /*font:  20px;
             font:  楷体; 
             font:  楷体 20px; */
            font: bold italic 20px/50px  楷体;
        }
        span{
            /* font-weight: bold; */
        }
        b{
            font-weight: normal;
            line-height: 40px;
        }
        i{
            font-style: normal;
        }
        .p{
            border: 1px solid red;  /* 给 P标签加一层 红色边框*/
            height: 50px;
            line-height: 50px;
        }
</style>

    <p>xxx网站统计, 目前世界Web语言排名:  </p>
    <p>第一名: PHP 占 82%  </p>
    <p>第二名: ASP.Net 占 5%</p>
    <p>第三名: Java 占 2% </p>
    <span> 原始标签, 内联标签 </span> <br>
    <b> 原始标签, 内联标签-加粗 </b>  <br>
    <i> 内联标签 - 倾斜</i>
    <p class="p">块级标签 - 段落</p>