CSS之文字样式

CSS字体属性定义字体，颜色、大小，加粗，文字等的样式

一、font-size 字号

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能 通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

二、font-weight 加粗

font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 700;

三、font-style 倾斜

font-style的作用不是为了设置倾斜字体，相反是为了清除倾斜效果

• normal：正常
• italic：倾斜

font-style: normal;
font-style: italic;

四、line-height 行高

注意：实际开发时需要测量真实行高，从一行文字最顶端到下一行文件最顶端就是行高

• 方法：
  • 直接设置像素值px
  • 数字（当前字体大小的倍数）

line-height: 30px;  
line-height: 3;

五、color 字体颜色

字体颜色的设置方法有四种，最常用的是后面两种

color: red;
color: rgb(255,0,0);
color: rgba(255,0,0,.5);
color: #2c505f;

六、text-indent 缩进

• 方法：
  • 直接写像素值px
  • em值 (常用)：指的是当前字号大小，1em代表缩进一个字号大小。

text-indent: 20px;
text-indent: 2em;

七、text-align 对齐方式

text-align：可以让文字在水平的方向对齐，对齐的方式有三种。

注意：如果要让文字居中对齐，只能是一行文字，存在换行的情况居中对齐失效。

text-align: left;  
text-align: center;  
text-align: right;  

text-align不仅可以让一行文字居中对齐，还可以让图片居中对齐。但是要注意图片居中必须要在div盒子里，因为居中的本质是让div盒子内容居中。

<style>
  div{
       width: 500px;
       height: 500px;
       border: 1px solid saddlebrown;
    }
  img{
      text-align: center;
    }
    </style>
<div>
    <img src="/img/主帅.jpg">  
</div>

八、font-family 字体族

• 注意
• 字体可以用中文或英文表示；
• 如果字体名称包含空格则必须加上引号；
• 如果有多个字体则用逗号隔开。

font-family: 楷体;  
font-family: Calibri;  
font-family: "Arial Unicode MS";  
font-family: 楷体,宋体; 

拓展：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，最后设置一个字体族名（网页开发建议使用无衬线字体self-serif）执行顺序是从左向右依次查找。

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,楷体, sans-serif;

九、text-decoration 下划线

text-decoration的主要作用就是去掉超链接的下划线

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

十、font 复合属性

作用：font一般用在网页文字的公共样式

• 方法：【font：是否倾斜 是否加粗 字号/行高 字体】必须按此格式和顺序编写，并且字号和字体值不可省略，否则不生效。
  

*{
    font: normal 700 30px/2 楷体;
}