• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

3.2 字体类型font-family

一、font-family属性

字体,我们经常见到,在word的使用中,我们往往会使用不同的字体,什么宋体、微软雅黑等。在CSS中,使用font-family属性来定义字体类型。

语法:

font-family:字体1,字体2,字体3;

说明:

font-family可指定多种字体,多个字体将按优先顺序排列,以逗号隔开,注意逗号一定要是英文逗号。

举例1:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-family属性</title>
    <style type="text/css">
        #p1{font-family:宋体;}
        #p2{font-family:微软雅黑;}
    </style>
</head>
<body>
    <p id="p1">字体为宋体</p>
    <p id="p2">字体为微软雅黑</p>
</body>
</html>

在浏览器预览效果如下:

font-family属性

举例1:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-family属性</title>
    <style type="text/css">
        p{font-family:微软雅黑,Arial,Times New Roman;}
    </style>
</head>
<body>
    <p>绿叶学习网,让这里的一切成为衬托你成功的绿叶。</p>
</body>
</html>

在浏览器预览效果如下:

font-family属性

分析:

对于“p{font-family:微软雅黑,宋体,Times New Roman;}”这句代码,初学者可能会觉得很疑惑。为什么要为元素同时定义多个字体呢?

其实原因是这样的:每个人的电脑装的字体都不一样,我们定义“p{font-family:微软雅黑,Arial,Times New Roman;}”这句的意思是,p元素优先用“微软雅黑”字体来显示,如果你的电脑没有装“微软雅黑”这个字体,那接着就用“Arial”字体来显示,如果也没有装“Arial”字体,接着就用“Times New Roman”字体来显示,以此类推。

否则,如果你只定义“p{font-family:微软雅黑;}”的话,如果你的电脑没有装“微软雅黑”字体,p元素就直接用浏览器默认的“宋体”字体来显示了,达不到你预期的效果。

默认情况下,浏览器的字体是宋体。中文字体常用的有宋体、微软雅黑,英文字体比较常用的是Times New Roman、Arial。

在CSS进阶教程中,我们会更深入讲解字体类型。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部