HTML5教程

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

本文主要是介绍【重学前端】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标签以外,一般不给其它标签加下划线效果,以免让用户产生误解

这篇关于【重学前端】CSS 字体属性 Font的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!