从零开始前端学习[10]:控制字体的样式font样式

来源：互联网发布：谭浩强c语言电子书pdf 编辑：程序博客网时间：2024/06/06 04:05

控制字体的样式font样式

color 字体颜色的属性
font-weight 控制字体粗细的属性
font-variant 小型大写字母属性
font-style 控制字体风格的属性
font-size 控制字体大小的属性
line-height 行高的属性
font-family 控制字体的类型的属性
font的复合样式属性

提示：
博主：章飞_906285288
博客地址：http://blog.csdn.net/qq_29924041

color 字体颜色的属性

color属性主要是用来控制字体的颜色的，即文本字体的颜色样式:
使用的方式其实很简单，即使用我们之前设置颜色的几种形式：十六进制方式，英文字母方式，rgb方式以及rgba的调用形式

 .main .color1{color: #6665E1;} .main .color2{color: deeppink;} .main .color3{color: rgb(170,77,88);} .main .color4{color: rgba(66,77,88,0.5);}

如上述的几种调用方法,代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->    <meta name="Generator" content="EditPlus®">    <!--编辑器的名称-->    <meta name="Author" content="作者是谁">    <meta name="Keywords" content="关键词">    <meta name="Description" content="描述和简介">    <style type="text/css">        body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {            margin: 0;        }        ul, ol {            margin: 0;            list-style: none;            padding: 0;        }        a {            text-decoration: none;        }        * {            margin: 0;            padding: 0;        }        .main {            width: 1200px;            border: 1px solid red;            margin: 30px auto;        }        .main .color1{            color: #6665E1;        }        .main  .color2{            color: deeppink;        }        .main .color3{            color: rgb(170,77,88);        }        .main .color4{            color: rgba(66,77,88,0.5);        }    </style></head><body>    <div class="main">        <div class="color1">            十六进制颜色属性        </div>        <div class="color2">            英文名字的颜色属性        </div>        <div class="color3">            rgb的颜色属性        </div>        <div class="color4">            rgba的颜色属性        </div>    </div></body></html>

显示的效果如下所示:
这里写图片描述

font-weight 控制字体粗细的属性

font-weight:是控制字体粗细的属性，相当于之前的strong和b标签等加粗属性的标签
font-weight的属性值可以有两类，
一类是英文名字：normal(正常)，bold(粗体)，和bolder（比粗体更粗一点）,lighter (比正常字体淡 )
一类是数字进行显示，数字显示的范围是100—-700；即400是正常(normal),700是最粗的

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->    <meta name="Generator" content="EditPlus®">    <!--编辑器的名称-->    <meta name="Author" content="作者是谁">    <meta name="Keywords" content="关键词">    <meta name="Description" content="描述和简介">    <style type="text/css">        body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {            margin: 0;        }        ul, ol { margin: 0;list-style: none;padding: 0; }        a {  text-decoration: none;}        * { margin: 0;padding: 0;}        .main{            width: 1200px;            border: 1px solid red;            margin:40px auto;        }        .main .normal{font-weight:normal;}        .main .bold{font-weight: bold;}        .main .bolder{font-weight: bolder;}        .main .number_400{font-weight: 400;}        .main .number_600{font-weight: 600;}        .main .number_700{font-weight: 700;}    </style></head><body>    <div class="main">        <div class="normal">            字体粗细的normal属性        </div>        <div class="bold">            字体粗细的bold属性        </div>        <div class="bolder">            字体粗细的bolder属性        </div>        <div class="number_400">            字体粗细的400        </div>        <div class="number_600">            字体粗细的600        </div>        <div class="number_700">            字体粗细的700        </div>    </div></body></html>

显示效果如下所示:

这里写图片描述

font-variant 小型大写字母属性

font-variant:属性主要的意思是可以设置小型的大写字母，就是将原来的小写字母转换成大写字母，但是要比平时的大写字母要小很多
注意：如果本来就是大写字母的话，是无效的

属性值：font-variant:normal;//默认是normal，正常font-variant:small-caps; //小型的大写字母

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        .main{          width: 1200px;          margin: 50px auto;          background: #84a3e3;        }      .main span{font-variant: small-caps}  </style></head><body>  <div class="main">    控制字体的小型的大写字母 <span>i love study qianduan!!</span> AND I LOVE JAVA!!!  </div></body></html>

显示效果如下所示：

这里写图片描述

font-style 控制字体风格的属性

font-style表示控制字体的风格的属性：字体的显示风格及是正常显示或者是斜体显示，类似于em和i标签
font-style属性值有两个：normal(正常)，italic(斜体)，oblique(斜体)，
注意： italic和oblique的区别与em标签和i标签的区别类似，即italic强调效果，权重比较高，有助于seo搜索，oblique强调的是显示

font-style:normal;font-style:italic;font-style:oblique;font-style:inherit;//表示此样式是从父级继承来的，父级显示什么样式，那么子集就显示什么样式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .normal{font-style: normal}    .italic{font-style: italic}    .oblique{font-style: oblique}  </style></head><body>  <div class="normal">font-style的normal属性</div>  <div class="italic">font-style的italic属性</div>  <div class="oblique">font-style的oblique属性</div></body></html>

显示：
这里写图片描述

font-size 控制字体大小的属性

比较重要的font-size属性，可能在前端–移动端开发过程中的使用单位也比较重要，在pc端的设计中同样是比较重要的
浏览器默认的字体大小是16px,最小的字体大小为12px，

font-size:25%;  //按照父级元素的25%来进行字体显示font-size:24px; //按照24px来显示文字font-size:2em;  //按照父级元素使用的字体大小作为单位,如果父级为14px,则2em表示2*14font-size:2rem; //按照html跟元素使用的字体大小作为单位，如果html默认是16px,则2rem则为32

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        .main{          width: 1200px;          border: 1px solid red;          background: deeppink;          margin: 50px auto;          font-size: 14px;        }      .main .percent{        font-size:25%; /*按照父亲元素尺寸的25%来进行显示*/      }    .main .num{      font-size: 22px;    }    .main .em{      font-size: 4em;    }    .main .rem{      font-size: 2rem;    }  </style></head><body>  <div class="main">    <div class="percent">      字体大小按照父级百分比的大小显示    </div>    <div class="num">      字体大小按照具体的px像素显示    </div>    <div class="em">      字体大小按照父元素使用字体的大小来显示    </div>    <div class="rem">    字体大小按照根元素html字体大小显示    </div>  </div></body></html>

这里写图片描述
如上所示:
第一行显示的是相对父元素字体的25%来显示，因为浏览器最低为12px所以显示12px
第二个按照具体的像素为单位，所以不做解释
第三个是按照父级元素的字体为单位，父级为14px，所以4em则为56px
第三个按照html根元素，html默认为16px，所以此时2rem则为32px

line-height 行高的属性

line表示字体样式的行高属性，即行级元素占用的高度，这个属性主要是用于字体居中使用的，一般情况下，父级高度为多少，那么行高就设置为多少

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{      width: 1200px;      border: 1px solid red;      margin: 50px auto;    }    .main .content{      height: 50px;      border: 1px solid blue;    }    .main .content span{      line-height: 50px;    }  </style></head><body>  <div class="main">    <div class="content">      <span>行高居中的测试</span>    </div>  </div></body></html>

显示如下所示，字体居中显示了
这里写图片描述

注意行高的设置是字体在父级中垂直居中，span设置行高为50px，但是span的大小并没有改变

font-family 控制字体的类型的属性

font-family 控制字体的类型的属性，在word中，我们可以看到很多时候都可以选择是什么样子的字体，如华文行楷，宋体，

font-family: “微软雅黑”(系统默认字体为 宋体)

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
如:

font-family:"serif", "sans-serif", "cursive" ,"fantasy ","monospace"

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    body{      font-family: "隶属","微软雅黑","华文行楷","宋体";    }  </style></head><body>    字体类型的属性</body></html>

font的复合样式属性

font的复合属性其实也就是对上述的 :

font-weight 控制字体粗细的属性
font-variant 小型大写字母属性
font-style 控制字体风格的属性
font-size 控制字体大小的属性
line-height 行高的属性
font-family 控制字体的类型的属性

所有属性进行联合使用的过程，如下所示:

font:字体粗细 小型大写字母 字体样式  字体大小/行高  字体类型font: font-weight font-variant font-style（font-size/line-height  font-family）按照顺序依次往下填充即可,当然可以有缺省属性。

如以下缺省项目显示:

    font: bold small-caps italic 30px/50px "微软雅黑";     font: bold 20px/50px  "" ;

复合属性在此不演示了，就是将以上的属性进行联合使用的过程
注意font-family如果不写的话，必须使用”“代替；

欢迎持续访问博客

阅读全文

1 0