【重学前端】CSS 字体属性 Font

font-family 字体名称

作用： 设置或检索用于对象中文本的字体名称序列。

语法： font-family : name

示例：

p{ font-family: 微软雅黑; }
p{ font-family: "arial block"; }
p{ font-family: Courier, "arial block"; }
p{ font-family: Courier, "arial block", 微软雅黑; }

注:
1）字体名称可以是英文也可以是中文。
2）英文字体如果出来多个单词需要用双引号包括。
3）可以写多个字体，浏览器根据用户电脑上的字体从左到右选择。多个字体用逗号（半角逗号）分隔。
标准不是某一个标准

font-size 字体大小

作用： 设置或检索对象中的字体尺寸。

语法： font-size : absolute-size| relative-size| length

参数：

absolute-size : 绝对值字体。如： 50px 

relative-size : 相对于父对象中字体尺寸进行调节。如：1em 

length : 百分数 | 由浮点数字和标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。

示例：

div{ font-size: 12px; }
div{ font-size: 1.5 em; }
div{ font-size: 1rem; }
div{ font-size: small; }
div{ font-size: 80%; }  /* 相对于父对象中字体的百分比，字体不能自适应 */
div{ font-size: smaller; }

补充：在CSS中关于尺寸大小的单位

注：

在PC上通常用 px ， 中文字大小通常为  12px  14px  16px  18px

在手机中通常用 rem ， 中文字大小通常为  0.75rem  0.8rem   1rem  1.2rem

font-weight 字体粗细

作用： 设置或检索对象中的文本字体的粗细。

语法： font-weight :normal| bold| bolder| lighter| number

参数：

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置

bold : 粗体。相当于number为700。也相当于b标签的作用

bolder : 特粗体

lighter : 细体

number : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

示例：

p { font-weight:bold; }
h1{ font-weight:normal; }
span{font-weight:800;}

font-style 字体样式

作用： 设置或检索对象中的字体样式。

语法： font-style :normal| italic| oblique

参数：

normal : 正常的字体

italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique

oblique : 倾斜的字体

p { font-style: italic; } 

 line-height 行高

作用： 检索或设置对象的行高。

语法： line-height :normal| length

示例：

div {line-height:30px; }  /* 行高设置为固定值30px */
div {line-height:1.5; }  /* 行高设置为1.5倍 */
div {line-height:150%; }

注： 值可以是固定值，也可以是相对值。

 Font 字体复合属性

作用： 设置或检索对象中的文本特性。该属性是复合属性。

语法： font :

font-style

font-weight

font-size/line-height

font-family

示例：

 

/*完整写法*/
p { font:italic bold 12px/30px arial,sans-serif,宋体;}

/*常用简写形式*/
p { font: 12px/24px 宋体; }
p { font: bold 12px/24px 宋体; }

注：

复合属性的每一个属性值之间通常用空格隔开，特殊要求除外。

font最精简的形式也必须是font: 12px/24px 宋体; 否则不会生效。

color字体颜色

作用： 检索或设置对象的文本颜色。无默认值。

语法： color :color

示例：

div {color: red; }

CSS中颜色的三种表现方式：

1）英文名称
红色：red   绿色：green  蓝色：blue  黄色：yellow ...

2）16进制颜色值（#RRGGBB） 0-9    10-15（A-F）
红色：#ff0000  绿色：#00ff00  蓝色：#0000ff  黄色：#ffff00 ...

这种模式可以简写，简写原则为： RGB三段分别相同时可以简写成3位。
正确的： #ff0000  =>  #f00     #00ff00  =>  #0f0     #228833  =>  #283
错误的： #f10000  =>  #f100   #00ab11 =>  #0ab1     #228e36  =>  #28e36

3）rgb或 rgba
红色： Rgb(255,0,0)  绿色：Rgb(0,255,0)  蓝色：Rgb(0,0,255)  黄色：Rgb(255,255,0) 
Rgba(255,0,0,1) 最后一位是alpha透明通道。 

text-transform 英文大小写

 

作用： 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。

语法： text-transform:none| capitalize| uppercase| lowercase

参数：

none 默认。定义带有小写字母和大写字母的标准的文本。

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义无大写字母，仅有小写字母。

p { text-transform : uppercase; }
p { text-transform :capitalize; }

text-decoration 修饰线

作用： 检索或设置对象中的文本的装饰。

语法： text-decoration :none| underline| blink| overline| line-through

参数：

none : 　无划线

underline : 　下划线

blink : 　闪烁

line-through : 　贯穿线（删除线）

overline : 　上划线

div { text-decoration : underline; }
div { text-decoration : line-through; }

注：

1）通常用于清除A标签的默认下划线

2）除A标签以外，一般不给其它标签加下划线效果，以免让用户产生误解