字体和文本

字体是“文字的不同体式”或者“字的形体结构”。对于英文而言,每种字体都是由一组具有独特样式的字母、数字和符号组成的

字体属性主要描述一类字体的大小和外观。比如,使用什么字体族(是Times,还是Helvitica),多大字号,粗体还是斜体。文本属性描述对文本的处理方式。比如,行高或者字符间距多大,有没有下划线和缩进等

1. 网页中字体来源

  1. 用户机器中安装的字体
  2. 保存在第三方网站上的字体。最常见的是Typekit 和Google,可以使用link 标签把它们链接到你的页面上
  3. 保存在你的Web 服务器上的字体。这些字体可以使用@font-face 规则随网页一起发送给浏览器

2. 通用的字体类
serif      衬线字体,在每个字符笔画的末端会有一些装饰线
sans-serif   无衬线字体,字符笔画的末端没有装饰线
monospace   等宽字体,顾名思义,就是每个字符的宽度相等(也称代码体
cursive      草书体或手写体
fantasy    不能归入其他类别的字体(一般都是奇形怪状的字体)

每一类字体可以分成不同的字体族(font family),比如Times 和Helvetica。而字体族中又可以包含不同的字型(font face),反映了相应字体族基本设计的不同变化

3. 常用的字体栈

Verdana 的后备用Tahoma 最好,因它们的“x 高度”相同。

verdana, tahoma, sans-serif

如果想设定一个相对轻爽一点的无衬线字体,可以使用这个字体栈

helvetica, arial, sans-serif

字体大小

1. 绝对字体大小

 

使用像素、派卡(pica)或英寸设定字体大小很简单,它们是绝对单位,因此设定多大就多大,与祖先元素的字体大小无关

设定绝对字体大小时,也可以使用关键字值,比如x-small、medium、x-large(http://css-discuss.incutio.com/wiki/Using_Keywords)

 

2. 相对字体大小

使用百分比、em 或rem(根元素的字体大小)设定字体大小要复杂一些。如果你给某个元素设定了相对字体大小,则该元素的字体大小要相对于最近的“被设定过字体大小的”祖先元素来确定。

页面基准大小为16px, 如果你想使用em,但又需要设定具体的像素大小,可以把body 的font-size 设定为62.5%。这样,就等于把基准大小从16 像素改为10 像素(16×62.5%=10)

body{ font-size: 62.5%}

CSS3 新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注。这个单位与em 有什么区别呢?区别在于使用rem 为元素设定字体大小时,仍然是相对大小,但相对的只是HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8 及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem 设定的字体大小

小型大写字母

h3 {font-variant:small-caps;}

Welcome to This Session

 经常将small-caps 用于::first-line 伪元素

简写字体属性

p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

font 属性是一个简写形式,通过它只要一条CSS 声明就可以设定所有字体属性。不过,使用这个简写形式要遵守两条规则,否则浏览器无法正确解释声明的值。
规则一:必须声明font-size 和font-family 的值。
规则二:所有值必须按如下顺序声明。
1. font-weight、font-style、font-variant 不分先后;
2. 然后是font-size;
3. 最后是font-family。
实际上,在设定font-size 属性的同时,可以顺便设定line-height(行高)值。也就是说,字体大小和行高的值可以写在一块,比如12px/1.5

行高  http://www.ituring.com.cn/article/18076

CSS 中的行高平均分布在一行文本的上方和下方。举个例子,如果字体大小是12 像素,行高是20 像素,则浏览器会在文本上方和下方各加4 像素的空白,以凑足20像素的行高。
对于类似标题的一行文本来说,line-height 增加的空白就像外边距一样,较大的标题(如h1 和h2)往往有较大的默认行高。

这一点应该记住,因为有时候即使把外边距和内边距全去掉,标题上下仍然会有空白。如果想把这些空白也去掉,那就只能把文本的行高设定为比字体高度(就是字体大小)还要小,比如设定为小于1 的值

垂直对齐

vertical-align 以基线为参照上下移动文本,但这个属性只影响行内元素。如果你想在垂直方向上对齐块级元素,必须把其display 属性设定为inline

p.custom sub {font-size:60%; vertical-align:-.4em;}
p.custom sup {font-size:65%; vertical-align:.65em;}
p.customsmall {font-size:.8em; vertical-align:1em;}

 

在网页中嵌入字体的第二种方式是使用@font-face 规则,前提是可以从你的网站或第三方Web 服务器下载到相应的字体。以这种方式提供的字体,会在使用该字体的页面第一次加载时被浏览器下载并缓存起来,以后就不用下载了

使用@font-face 的一个问题是不同浏览器要求的字体格式不一样。比如,Firefox、Webkit 核心的浏览器(Safari 和Chrome),以及iOS 4.1 版之后的移动Safari 使用OTF(OpenType)或TTF(TrueType)字体。Internet Explorer 使用EOT(EmbeddedOpenType)。另外,iOS 4.1 之前版本中的移动Safari 以及其他浏览器使用SVG(Scalable Vector Graphics)格式

 http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

 首字下沉效果

h1 + p::first-letter {
font-family:times, serif;
font-size: 90px;
float:left;
line-height:.65; /*我们把line-height 设定为小于1 的值,以便元素盒子紧紧包住首字*/
border:1px solid;
}