HTML+CSS字体文本

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

HTML文本标签

文本级语义标签包括：

• a 超连接
• em 侧重点的强调，可嵌套。表现为倾斜文字。HTML5中建议使用
• strong 表示内容重要性，可嵌套。表现为文字加粗。HTML5中建议使用
• small 旁注，比正文稍小
• dfn 定义术语，表现为文字倾斜
• abbr 缩写词，一般配合dfn使用

<abbr title="World Wide Web">WWW</abbr>.

• data html5中新增标签，为元素赋以机器可读的数据，其中的value属性指定具体数据
• time html5中新增标签，data标签的时间格式版本

<time datetime="2015-07-09">9 July 2015</time>. Retrieved <date datetime="2015-07-16">16 July 2015</date>.

• code 源码格式
• var 定义变量
• samp 计算机输出
• kbd 用户输入
• sub 下标文本
• sup 上标文本
• i 斜体
• b 粗体
• u 下划线
• s 删除线
• mark 高亮显示文本
• ruby,rt,rp 拼音
• bdo 定议文本的显示方向，其中的dir属性具体定义方向，有ltr和rtl两个可选值
• span 本身无语义，用于包含文本
• br 换行
• wbr 指定何处适合换行。是否换行以排版时的具体情况为准

blockquote，q，cite标签

三个跟引述相关的标签

• 其中blockquote表示段落级引述内容
• q表示行内的引述内容，表现为双引号的形式
• cite表示引述的作品名，表现为文字倾斜

i、b、u、s标签

这些标签是之前被废弃的标签，在HTML5中为其增加了新的语议

• s标签，之前表示删除线，现在表示错误的内容
• i标签，之前表示斜体，现在表示读的时候变调
• b标签，之前表示黑体，现在表示关键字
• u标签，之前表示下划线，现在表示避免歧义的注记

font字体

属性名	含义	取值
font-family	设置字体类型	字符串
font-size	设置字体大小	12px是可能的最小取值
font-style	设置字体风格	normal | italic | oblique
font-weight	设置字体的粗细	normal | bold | 100-900
font-variant	使用小型大写字体的字母	normal | small-caps
line-height	设置两行文本之间	数值 | 长度 | 百分比

font-size:大小

• font-size属性用于设置字号
• 可以使用相对长度单位，也可以使用绝对长度单位
• 相对长度单位比较常用，推荐使用像素单位px
  • 在移动端开发或需要适配移动端开发的时候，建议将font-size的取值的单改成em或rem
• 谷歌浏览器默认的文字大小为16px
• 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

font-family:字体

• font-family属性用于设置哪一种字体
• 网页中常用的字体有宋体、微软雅黑、黑体等
• 可以同时指定多个字体，中间以英文状态下的逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准
• 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
• 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;
• 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示

CSS Unicode字体

• 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误，故建议写英文名或Unicode 编码
• 为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

字体名称	英文名	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
细明体	MingLiU	\534E\6587\7EC6\9ED1
新细明体	PMingLiU	\7EC6\660E\4F53
华文细黑	STXihei	\65B0\7EC6\660E\4F53

font-weight:字体粗细

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	直接定义粗细，400 等同于 normal，而 700 等同于 bold

font-style:字体风格

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

font:综合设置字体样式（缩写）

选择器 { font: font-style  font-variant  font-weight  font-size/line-height  font-family;}

• 必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
• 其中不需要设置的属性可以省略（取默认值），但必须保留font-size、line-heigh和font-family属性，否则font属性将不起作用
• 注意，缩写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写

文本属性

属性	功能描述	取值
word-spacing	定义词与词之间的间距	normal、length
letter-spacing	定义字母与字母间的间距	normal、length
vertical-align	定义文本的垂直对齐方式	baseline、sub、super、bottom、text-bottom、top、middle、%、长度
text-decoration	定义文本的修饰线
text-indent	定义文本的首行缩进	lengthpx、%
text-align	定义文本的水平对齐方式	left、center、right、justify
text-transform	定义文本大小写	none、uppercase、lowercase、capitalize(首字母大写)
text-shadow	定义文本阴影效果
white-space	定义文字之间和文本之间的空白字符间距	normal、nowarp、pre、pre-wrap、pre-line
direction	控制文本流入的方向	lrt(默认值)、rtl、inherit

text-align和vertical-align

text-align属性为水平对齐

值 说明
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果（为了达到这种效果，会在行内自动调整字间距）

值	说明
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

vertical-align属性为垂直对齐，vertical-align属性可以影响inline、inline-block、table-cell元素垂直方向上的布局。

其可能的取值包括：

• baseline，小写字母x的下边缘线就是baseline，也称为“基线”。baseline本身有复杂的确定规则
• sub、super，将baseline降低、升高到下标、上标的位置上。sub的值相当于，<sub>标签，super亦然
• top、text-top，把元素的顶端与行中最高元素（父体的顶端）的顶端对齐
• middle，把此元素放置在父元素的中部
• bottom、text-bottom，把元素的顶端与行中最低的元素的端底（父元素字体的底端）对齐
• percentage，百分比
• lenght（上移（正值）或下移（负值）的距离，单位px。）

解析：需要注意的是以上大部分取值都是将文本与父元素的某个位置对齐，比如baseline，就是与父元素的基线对齐；text-top就是让文本与父元素字体的顶端对齐。只有sub、super、percentage、lenght四个取值只于文本本身有关

CSS外观属性

color:文本颜色

	属性值
预定义的颜色值	red，green，blue，pink，……
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

text-align:文本水平对齐方式

属性	解释
left	左对齐
right	右对齐
center	居中对齐

• 是让盒子里面的内容水平居中， 而不是让盒子居中对齐

line-height:行间距（行高）

• line-height属性用于设置行间距，就是行与行之间的距离
• line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

text-indent:首行缩进

• text-indent属性用于设置首行文本的缩进

• 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值（用于隐藏网站的文字标题）

• 建议使用em作为设置单位

  • 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

text-indent属性常用于隐藏网站的文字标题，一般的写法如下：

<header id="main_header">
    <h1 style="text-indent: -9999px;font:12px/20px '微软雅黑';text-align:left;">
    	NNBlog
    </h1>
</header>

text-decoration 文本的装饰

• text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。 取消下划线（最常用）
underline	定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

text-shadow文本阴影

语法及其解析：

text-shadow: x-offset y-offset [blur-radius] [color],[...];

1. color，阴影颜色，可选，没有设置的话以文本颜色为阴影颜色。该值也可以放在最后
2. x-offset，x轴位移，指定阴影在x轴上的位移。为正值时阴影在对象的右边，反之在左边
3. y-offset，y轴位移，指定阴影在y轴上的位移。为正值时在对象的底部，返之在顶部
4. blur-radius，阴影模糊半径，可选参数。只能为正值，值越大，阴影边缘就越模糊。为0时没有模糊效果。单位为px

white-space空白字符间距

white-space属性指定对文本内容中空格和换行符的处理方式

• normal，为默认样式，表示合并空格，多个相邻空格合并成一个；忽略除br标签之外的其他换行符
• nowrap，也合并空格，但是不会根据容器大小换行，表示不换行
• pre，保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和br标签
• pre-wrap，保留空格，并且除了碰到源码中的换行和br会换行外，还会自适应容器的边界进行换行
• pre-line，合并空格，遇到源码中的换行和br会换行，碰到容器的边界也会换行

text-overflow文本溢出

text-overflow属性是CSS3中新的属性，其可能的取值为：clip或ellipsis

clip：不显示省略标记

ellipsis：显示省略标记。所谓省略标记指的在是最后字符中插入…

实现文本溢出加省略标记，还需要另外两个属性配合：white-space:nowrap；overflow:hidden

cursor指针样式

鼠标的样式：

• default 默认的箭头
• pointer 小手
• wait 沙漏
• help 带问号的箭头
• text 光标

文本选中

user-select属性，有些文字需要能被选中，有些不要能被选中

user-select: none|auto|text|contain|all;

属性取值：

• none : 元素和子元素的文本将无法被选中

• text : 文本可以被选中

• auto : 文本将根据浏览器的默认属性进行选择

• all : 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素

• contain、element : 可以选择文本，但选择范围受元素边界的约束，也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer

行高

行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中
• 如果行高 大于 高度 文字会 偏下
• 如果行高小于高度 文字会 偏上

链接标签

链接标签默认样式

color: -webkit-link;			/*前景色，私有颜色*/
cursor: pointer;				/*指针类型，小手类型*/
text-decoration: underline;		/*文本装饰，下划线*/