css的字体和尺寸

一、字体分类

CSS规定了五种一般字体族，每个字体族又包含了相同特征的各种字体：sans-serif, serif,monospace, cursive, 和 fantasy.

1、无衬线字体族--sans-serif family

前缀sans是法语，意思是无。这类字体没有衬线，比较圆润。通常这类字体在电脑上显示的可读性比较强。
这类字体主要有：Verdana、Arial Black、Trebuchet MS、Arial、Geneva等。

2、衬线字体族--Serif family

这类字体有衬线，即在字的尾部有钩等装饰。这类字体用于报纸打印。
主要有：Time、Time New Roman、Georgia等。

3、等宽字体族--Monospace family

顾名思义等宽字体的宽都是相等的。比如字母“i”和字母“m”有着相同的宽度。这类字体主要用于计算机代码的书写。
主要有：Courier、Courier New、Andale Mono等。

4、手写字体族--Cursive family

这类字体看上去就像是手写的，有事你可以看到这种字体用于标题。
主要有Comic Sans、Apple Chancery、Caflisch Script、Adobe Poetica等。

5、梦幻字体族--Fantasy family

这是一种经过装饰的字体，很有艺术感。
有Last NinjA、Impact等。

二、CSS字体的使用

1、使用计算机中已有字体

CSS使用font-family属性设定文字的字体：

body {
font-family: Verdana, Geneva, Arial, sans-serif;
}

以上代码为body元素中的文字指定了字体。Verdana是Windows中常用的字体，Geneva是Mac中常用的字体，Arial是两种系统都有的字体，最后一个是作者希望字体所显示的字体族。前三者都是具体的字体名字，浏览器会按先后顺序寻找相应的字体，若计算机系统未安装对应字体，则自动寻找下一个字体，若都没有找到，则会根据最后一个sans-serif的设定，显示默认的非衬线字体。这种机制让网页可以适应不同的计算机系统，显示作者需要的字体。

2、使用网络字体

CSS还可以通过URL寻找网络上的字体。可以使用@font-face设定字体的来源并命名。

<pre name="code" class="css"><pre name="code" class="css">@font-face {
font-family: "Emblema One";
src:  url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff")format('woff'),       
       url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf")format('ttf');
}

先上传字体到服务器，代码中font-family用于设定字体名字，src用于指定字体的地址。

h1 {
font-family: "Emblema One", sans-serif;
}

然后再使用设定的字体名设置字体。

3、字体的格式

字体格式主要有：

TrueType fonts: .ttf

OpenType fonts: .otf

Embedded OpenType fonts: .eot

SVG fonts: .svg

Web open font format: .woff

4、字体的网站

http://www.fontsquirrel.com/

http://www.youziku.com/

http://www.google.com/webfonts

https://typekit.com/

http://fontdeck.com/

三、字体大小的设置

字体大小的设置有如下几种方式：
1、用像素值设置

body {
font-size: 14px;
}

字体的高度为14px
2、用百分比设置

body {
font-size: 150%;
}

即大小是父元素的150%

3、用比例设置

<pre name="code" class="css">body {
font-size: 1.4em;
}

即大小是父元素的1.4倍 

4、用关键字设置

body {
font-size: small;
}

关键字有xx-small, x-small, small, medium, large, x-large,  xx-large，后一个的大小是前一个的120%，small大约是12px高。

使用时一般在body中使用关键字定义，在body的子元素中用百分比和倍数定义，这样要修改整个页面只需要修改body即可。

参考文献：

Head First HTML and CSS