很多朋友对于fontfamily和printhand完整版不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
网页字体属性全方位揭秘font-family
网页字体属性全方位揭秘font-family
font-family是CSS中一个非常重要的属性，它用于定义网页中文字的字体显示。通过font-family属性，我们可以控制网页在不同操作系统、不同浏览器环境下显示何种字体，从而提升用户体验。
一、font-family的基本作用
font-family属性允许我们指定一个或多个字体名称，浏览器会按照这些字体名称的顺序查找用户电脑中是否安装了相应的字体。如果找到了第一个字体，就会使用该字体显示网页中的文字；如果没有找到，就会继续查找下一个字体，直到找到为止。如果所有指定的字体都没有找到，浏览器就会使用默认的无衬线字体（sans-serif）或衬线字体（serif）来显示文字。
二、font-family的调用规则
字体名称的书写规则：在font-family属性中，字体名称之间用英文逗号隔开。如果字体名称中含有空格，则需要用英文双引号括起来。例如：font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;。
字体查找的顺序：浏览器会按照font-family属性中指定的字体名称顺序进行查找。如果第一个字体没有找到，就会尝试下一个字体，以此类推。因此，在设计网页时，我们应该将最希望使用的字体放在最前面，以确保在用户的电脑中能够优先显示。
英文字体与中文字体的声明顺序：由于英文字体中大多不包含中文，因此需要先对英文字体进行声明，这样不会影响到中文字体的选择。在声明中文字体时，应该紧随英文字体之后。同时，为了让Mac系统使用到显示效果最好的字体，可以优先声明Mac系统字体。由于Windows系统默认没有安装Mac系统字体，因此会延后调用其他字体如Arial和微软雅黑。
三、常用字体代码介绍
Helvetica：Mac系统的默认无衬线英文字体，充满了科技感，应用范围很广泛。但需要注意的是，Windows系统默认是没有的。
Helvetica Neue：Mac系统Helvetica字体的改善版本，增加了更多不同粗细与宽度的字形。
Arial：1982年模仿Helvetica而发明的英文字体，应用很广，也是Windows系统默认字体。
PingFang SC：苹果专为中国用户打造的中文字体，也是UI设计师做界面默认使用的字体。SC代表简体中文，同时苹果还提供了TC（中国台湾繁体）和HK（香港繁体）版本。
Hiragino Sans GB、Heiti SC：苹果丽黑和黑体-简，是Mac旧版本的中文字体，目前用的不多，主要目的是兼容旧Mac系统。
Microsoft YaHei：微软雅黑，Windows系统默认的中文字体，也是最常见的中文字体。但需要注意，微软雅黑是有版权的。
WenQuanYi Micro Hei：文泉驿微米黑，Linux系统下默认中文字体，为了兼容Linux系统。
sans-serif：无衬线字族，当所有的字体都找不到时，可以使用字体族名称作为操作系统最后选择字体的方向。
四、Emoji表情字体
除了常见的文字字体外，font-family属性还支持对Emoji表情字体进行设置。在工作中，Emoji表情应用广泛，能够给页面添彩并提升用户体验。常见的Emoji表情字体包括：
Apple Color Emoji：苹果产品的文字表情，在Mac和iOS系统中到处都可以看到，也是我们接触的最多的Emoji表情。
Segoe UI Emoji：Windows 10系统中的Emoji表情，黑描边风格，感觉没有苹果的圆润和质感。
Noto Color Emoji：Google推出的表情，和苹果的较为类似，更加扁平。
五、总结
font-family属性是CSS中用于定义网页字体显示的重要属性。通过合理设置font-family属性，我们可以确保网页在不同操作系统、不同浏览器环境下能够显示最适合的字体，从而提升用户体验。在设置font-family属性时，我们应该注意英文字体与中文字体的声明顺序、字体名称的书写规则以及Emoji表情字体的设置。同时，了解常用字体的特点和应用场景也是非常重要的。
cssfont-family常用的黑体宋体等字体中英文对照表
1."Microsoft YaHei":微软雅黑
2."Times New Roman": Times New Roman
3."SimSun":宋体
4."SimHei":黑体
5."Microsoft JhengHei":微软正黑体
6."New Song":新宋体
7."KaiTi":楷体
8."FangSong":仿宋
9."FangSong_GB2312":仿宋_GB2312
10."KaiTi_GB2312":楷体_GB2312
11."DFKai-**":标楷体
12."LiSu":隶书
13."YouYuan":幼圆
14."STXihei":华文细黑
15."STKaiti":华文楷体
16."STSong":华文宋体
17."STZhongsong":华文中宋
18."STFangsong":华文仿宋
19."FZShuTi":方正舒体
20."FZYaoti":方正姚体
21."STCaiyun":华文彩云
22."STHupo":华文琥珀
23."STLiti":华文隶书
24."STXingkai":华文行楷
25."STXinwei":华文新魏
26."SimSun-ExtB": SimSun-ExtB
27."Gb2312": GB2312
28."Gbk": GBK
29."Gb18030-2000": GB18030-2000
30."Gb18030-2005": GB18030-2005
31."X-Mac-ChineseSimp":简体中文(Mac)
32."X-Cp20936":简体中文(GB2312-80)
33."X-Cp50227":简体中文(ISO-2022)
34."EUC-CN":简体中文(EUC)
35."HZ-Gb-2312":简体中文(HZ)
36."GB18030":简体中文(GB18030)
font-family的定义多种字体
p{font-family:微软雅黑,Arial,Times New Roman;}
对于“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。
专题推荐：
