• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

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进阶教程中,我们会更深入讲解字体类型。

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

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

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

回到顶部