前端之CSS——属性和定位

一、字体属性

1、font-size（字体大小）

p {
  font-size: 14px;
}

　font-size 属性可设置字体的尺寸。

　　px：像素，稳定和精确

　　%：把 font-size 设置为基于父元素的一个百分比值，布局时用到。

　　em：移动端字体样式大小，相对于其父元素来设置字体大小

　　rem：可以换算为各种移动端，相对于根元素来设置字体大小

2、font-weight（字体粗细）

　font-weight字重，可用来调整字体粗细。

/*font-weight: normal;*/
/*font-weight: bold;*/
/*font-weight: bolder;*/
font-weight: 500;

取值：

/*值            描述
normal    默认值，标准粗细
bord      粗体
border    更粗
lighter   更细
100~900   设置具体粗细，400等同于normal，而700等同于bold
inherit   继承父元素字体的粗细值  
*/

3、font-family（字体系列）

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

　　font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

字体设置综合性写法

p{
    width: 300px;
    height: 60px;

    /*综合性写法*/
    font: 14px/30px"宋体";
    /* 等价于
    font-size: 14px;
    line-height: 30px;
    font-family: '宋体';
    */
}

使用font-family的注意要点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体</title>

    <style>
        p{
            width: 300px;
            height: 60px;
            /*综合性写法*/
            /*font: 14px/30px"宋体";*/
            font: 14px/30px"HanziPen SC";

            /* 等价于
            font-size: 14px;
            line-height: 30px;
            font-family: '宋体';
            */
            /*font:14px/30px  "Arial","Hanzipen SC","微软雅黑";*/
        
            
        }
    </style>
</head>

<body>
    <!-- 
        使用font-family注意几点：

        1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
        比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
        那么就会变成宋体
        页面中，中文我们只使用： 微软雅黑、宋体、黑体。 
        如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

        2.为了防止用户电脑里面，没有微软雅黑这个字体。
        就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
        没有安装微软雅黑字体，那么就是宋体：
         font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

        3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
         就自动的变为后面的中文字体： 
         font-family: "Times New Roman","微软雅黑","宋体";

        4.所有的中文字体，都有英语别名，
        我们也要知道： 微软雅黑的英语别名：
         font-family: "Microsoft YaHei";
          宋体的英语别名： font-family: "SimSun";
         font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

        5.行高可以用百分比，表示字号的百分之多少。
         一般来说，都是大于100%的，因为行高一定要大于字号。 
         font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 
         反过来，比如： font:16px/48px “宋体”;
         等价于 font:16px/300% “宋体”
     -->

    <p> 我是文本</p>
    
</body>
</html>

使用font-family注意要点