CSS字体、文本、背景属性设置——字体

  1. 字体粗细属性:font-weight
属性值 描述
noraml默认值,定义标准粗细的字体
bold 粗体字
bolder 更粗的字体
lighter 更细的字体
100
200
300
由细到粗的字体,400相当于normal,而700相当于bold
900
inherit 继承父级字体粗细

注:文字不设置font-weight时,默认是标准字体,如果想要文字加粗以突出显示,可以通过font-weight添加”bold”或”bolder”的属性值或者600以上的数值。想让文字比标准文字细的话则可以通过给font-weight添加”lighter”属性值或400一下的数值。另外使用数字来控制文字加粗,只能是整百,相近的数值,加粗表现得不是特别明显。

  1. 字体风格属性:font-style
属性值 描述
normal 默认值,标准字体风格
italic 斜体字体
oblique 倾斜的字体
inherit 继承父级字体风格

**注意:**italic 和oblique两者在显示上没有区别,实际应用中用的最多的是italic

  1. 字体大小属性: font-size
属性值 描述
medium 浏览器的默认值,大小为16px。如果不设置,同时父元素也没有设置字体大小,则字体大小使用该值
length 某个固定值,常用单位为px(像素)、em和pt(点)
% 相对值,基于父元素或默认值的一个百分比值
inherit 继承父元素的字体尺寸

注意:
px:主要用于电脑屏幕媒体。
pt:主要用于印刷媒体。
em:主要用于web媒体,em是相对长度单位,相对于当前文本的字体大小,1em就等于当前文字大小,如果父元素文本以及当前文本字体大小都没有被设置,则浏览器的默认字体大小为16px(12pt),此时1em=16px=12pt,当使用CSS修改当前元素或父元素的字体大小为15px时,1em=15px。
%:和em一样,属于相对长度单位,相对于父元素或默认值,当父元素设置了字体大小时,基于父元素的字体大小,否则基于浏览器默认大小(16px),不管该百分比相对于谁,都有%100=1em。

  1. 字体族属性:font-family
    使用font-family属性可以设置字体族,设置语法如下:
    font-family:字体族1,字体族2,……,通用字体族|inherit;
    常用属性值如下表:
属性值 描述
字体族名称1,字体族名称2……,通用字体族名称 值为1个或1个以上的字体系列,默认字体有浏览器决定
inherit 继承父级字体系列

注意:对于含有空格的字体,如“Times New Roman”,必须使用双引号或单引号将这些字体名称引起来,此外,为了保证兼容性,建议对所有中文字体都使用双引号引起来。
通用字体族,表示相似的一类字体,分为serif(衬线体)、sans-serif(无衬线体)、monospace、cursive、fantase五种类型,通常浏览器至少会支持每种通用字体里的一种字体,当字体大小为11px以上时,无衬线字体在显示器上显示效果会比较好,因此设置font或font-family时,一般会在最后添加sans-serif。
5. 文本行高属性:line-height
行高指的是上下文本行的基线间的垂直距离。

line-height:normal|number|length|百分数|inherit
属性值 描述
noraml默认值,行间距为当前字体的110%~120%
number 不带任何单位的某个数字。行间距等于此数字与当前的字体尺寸相乘的结果。效果等于em单位
lenght 以px
百分数(%) 相对于当前字体大小的行距。100%的行间距等于当前字体尺寸
inherit 继承父元素的line-height属性

文本行之间的间距指上面文本的底线和下面文本的顶线之间的距离,行距由行高和字体尺寸决定,其值等于行高减去字体尺寸。
注:对一个单行文本所在的区域设置高度后,如果想使该单行文本垂直居中,其中一种简单的方法就是使用line-height属性,将行高设置为高度值即可
6. 字体属性:font
用于同时对字体的多个属性设置

font:[font-style][font-weight] font-size/lineheight font-family;

定义样式时,各个属性值之间使用空格分隔,同时必须按照如上的排列顺序出现。需要注意的是,要想使简写定义有效,必须至少提供font-size和font-family这两个属性值,其他忽略的属性值将使用它们对应的默认值。另外font-size和font-height必须通过斜杠“/”组成一个属性值,不能分开写。

猜你喜欢

转载自blog.csdn.net/dream_follower/article/details/80977756