一、字体分类
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、字体的格式
4、字体的网站
三、字体大小的设置
字体大小的设置有如下几种方式:
1、用像素值设置
body {
font-size: 14px;
}
字体的高度为14px
2、用百分比设置
body {
font-size: 150%;
}
<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