一:需求效果
网页文字的排版,说难也不能难,往往我们不清楚、模糊的情况下,查一下w3c或者百度,一下就出来咯,次数多了终究显得麻烦。为了解决这一通病,总结了一些加深一下理解,让以后在网页的文字排版随心就能达到在word排版的境界。
二:知识梳要
font的复合属性包含以下这些(重点总结常用)
1: font-size属性重要设置字体大小 属性值有:
值 | 描述 |
---|---|
xx-small | |
x-small | |
small | |
medium | 默认值 |
large | |
x-large | |
xx-large | |
smaller | 设置比父元素更小的尺寸 |
larger | 设置比父元素更大的尺寸 |
length | 设置为一个固定的值 |
% | 基于父元素的一个百分比的值 |
inherit | 从父继承字体尺寸 |
2:font-style属性设置字体样式 属性值有:
normal ------->默认值
italic -------->浏览器会显示一个斜体的字体样式,注意是选择该字体的有的倾斜样式字体
oblique ---------> 浏览器会显示一个倾斜的字体样式,这是物理上强行倾斜
inherit ---------> 规定应该从父元素继承字体样式
3:font-weight 设置字体粗细 属性值有:
normal ----------->默认值
bold ----------->定义粗体字符
bolder ----------->定义更粗体字符
lighter ------------>定义更细的字符
100~900 --------->定义由粗到细的字符。100等价于lighter 400等价于nomarl 700等价于bold 900等价于bolder(经测试与bold与差异)
inherit ------------>继承父元素的font-weight
4:font-family属性设置字体系列 如:
有两种类型的字体系列名称:
- family-name - 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
- generic-family - 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。
normal--------------->默认值
small-caps--------->浏览器会显示小型大写字母的字体
inherit---------------->从父元素继承font-variant属性值
6.text-transform
控制元素中的字母
属性值有:
•text-transform: capitalize | uppercase |lowercase
(文字大小写转换,值分别是, 将单词首字母转大写 | 所有字母转大写 | 所有字母转小写,只对英文单词起作用。)
(文字大小写转换,值分别是, 将单词首字母转大写 | 所有字母转大写 | 所有字母转小写,只对英文单词起作用。)
letter-spacing属性 (设置文本中元素的字母间距)
属性值有:
normal--------->默认值。规定字符没有额外的空间
length---------->定义字符间的固定空间的距离(允许使用负值)
inherit ---------->从父元素继承letter-spacing的属性值 注意:ie不支持该属性值
word-spacing属性 (设置文本中元素的字或者单理解单词间距,一般浏览器用空格来识别)
属性值有:
normal-------------->默认;定义单词间的标准空间
length ------------->定义单词间固定空间
inherit--------------->从父元素继承word-spacing的属性值 注意:ie不支持
white-space属性 (设置如何处理元素内的空白)
属性值:
normal------------>默认;空白会被浏览器忽略(只留一个)
nowrap------------>文本不换行,文本会在同一行上继续,直到遇到<br/>标签为止
pre------------------>空白,换行会被浏览器保留。其行为方式类似html中的<pre>标签
pre-wrap---------->保留空白符序列,但是正常的进行换行
pre-line------------>合并空白符序列(去掉多余空白符),但也能保留换行符
inherit-------------->从父元素继承white-space属性值 注意:ie不支持
text-indent属性 (设置文本段落的第一行进行缩进)
属性值有:
length-------------->定义固定的缩进,默认值为0
%-------------------->定义基于父元素宽度的百分比的缩进
inherit-------------->从父元素继承text-indent属性值 注意:ie不支持该属性
text-shadow:规定添加到文本的阴影效果
语法:text-shadow: h-shadow v-shadow blurcolor;
说明:
1、h-shadow:必需,水平阴影的位置,允许负值
2、v-shadow:必需,垂直阴影的位置,允许负值
3、blur:可选,模糊的距离
4、color:阴影的颜色
text-align:水平对齐方式
语法:{text-align:left/right/center/justify(“两端对齐中文不起作用”);}
vertical-align:垂直对齐方式
语法:{vertical-align:top/bottom/middle/baseline;}
适用于:指定图片垂直对齐方式,相对于其他文字
该属性只对inline-block类型的元素起作用,他设置的是元素左右两边的元素相对于自己的对齐方式
line-height属性 (设置行间的距离 即行高)
属性值有:
normal---------------------->默认。设置合理的行间距
number--------------------->设置数字,此数字会与当前的字体尺寸相乘来设置行间距
length----------------------->设置固定的行间距
%----------------------------->基于当前尺寸的百分比行间距
inherit----------------------->从父元素继承line-height属性值 注意:ie不支持
word-wrap属性
word-wrap属性允许长的内容可以自动换行。
语法结构:word-wrap: normal|break-word;
normal:只在允许的断字点换行(浏览器保持默认处理)。
break-word:在长单词或url地址内部进行换行。
生活寄语
爱代码,爱生活!