css设计指南-笔记6

一.字体

字体系列 font-family

字体名多于一个单词时,加引号

serif		//衬线字体
sans-serif 	//无衬线字体
monospace	// 等宽字体(代码体)
cursive		//手写体或草书体
fantasy		//奇幻字体

字体大小 font-size

font-size: 16px		//绝对大小
font-size: .75em	//相对大小
font-size: 75%		//相对大小
font-size: .75rem	//只相对HTML根元素

字体样式 font-style

font-style: italic		//斜体(把正体设为斜体)
font-style: oblique		//斜体
font-style: normal		//正体(把斜体设为正体)

字体粗细 font-weight

最好只用bold、normal

字体变化 font-variant

只有normal和small-caps(使所有小写英文字母变成小型大写字母)

简写字体

必须声明font-size和font-family
所有值必须按照顺序声明

font-weight, font-style, font-variant不分先后
font-size
font-family

font: bold iatlic small-caps .9em helvetica, arial, sans-serif

二.文本

文本缩进 text-indent

设定行内盒子相对于包含元素的起点

字符间距 letter-spacing

单词间距 word-spacing

文本装饰 text-decoration

underline, overline, line-through, none

a {text-decoration: none;}
a:hover {text-decoration: underline;}
//控制链接的下划线

文本对齐 text-align

left, right, center, justify

行高 line-height

font: 1.2em/1.4 helvetica, arial, sans-serif	//与font-size写在一起

不用指定单位
行高平均分布在一行的上方和下方
eg:字体大小12px,行高20px,则文本上方和下方各加4px的空白
行高不叠加(垂直外边距叠加)

文本转换 text-transform

none, uppercase, lowercase, capitalize

capitalize	//每个单词的首字母转换为大写
uppercase	//全部转换为大写
lowercase	//全部转换为小写

垂直对齐 vertical-align

只影响内联元素,块级元素可以将display设置为inline
以基线为参照上下移动文本,常用于上标和下标

三.web字体

//保存在第三方网站上的字体
在<head>标签中添加<link>标签	//使用时需要引号

//保存在自己web服务器上的字体
@font-face {
	font-family: "UbuntuTitlingBold";
	src: url("UbuntuTitling-Bold-webfont.eot");
		src: url("UbuntuTitling-Bold-webfont.eot?#iefix")
		format("embedded-opentype"),
		url("UbuntuTitling-Bold-webfont.woff")
		format("woff"),
		url("UbuntuTitling-Bold-webfont.ttf")
		format("truetype"),
		url("UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold")
		format("svg");
	font-weight: normal;
	font-style: normal;
}
posted @ 2016-02-22 15:33  u14e  阅读(157)  评论(0编辑  收藏  举报