前言最近研究了一下各大网站的font-family字体设置，发现各个网站的默认值都不一样，甚至有的大网站出现了明显的错误，说明字体还是很有学问的，值得我们学习。不同的操作系统和不同的浏览器有不同的嵌入式默认字体。错误的字体设置会导致在不同环境下渲染页面时出现混乱。选择合适的字体是制作优秀网页的第一步。通过本文，我们将介绍字体的知识点，探讨如何在PC端和移动端正确设置字体。字体基础知识字体分类serif（衬线）sans-serif（无衬线）monospace（等宽）fantasy（梦幻）Cuisive（草书）这些不是指某种字体，而是一个字体家族，是一系列的fontsCollection，我们接触最多的是衬线字体和无衬线字体。serif（衬线字体）&sans-serif（无衬线字体）衬线是指在字符的笔画首尾有额外的修饰，笔画的粗细会有所不同。衬线字体的风格比较突出，常见的衬线字体有TimesNewRoman和Arial。SansSerif字体没有这些额外的修饰。笔画的粗细大致相同。等宽字体（monospacefont）等宽字体是指等宽的字体，通常用在技术文章的编辑器和代码块中，等宽字体主要针对西文字体，汉字都是等宽字体，Courier是最常见的等宽字体。Fantasy（奇幻字体）&cuisive（草书字体）在浏览器中很多场景用不到，就不多介绍了。font-family属性设置元素的字体。您可以同时指定多种字体。如果浏览器不支持第一种字体，它将尝试下一种。您可以设置字体或字体系列。例如：字体系列：Arial、sans-serif；如果没有设置font-family，会使用浏览器的默认字体，如果设置的font-family无效，也会回退到浏览器的默认字体。常用字体介绍Helvetica，苹果系统支持的西文无衬线字体，是苹果生态中最常用的一套西文字体。HelveticaNeue是Helvetica的改进版本，增加了更多不同粗细和宽度的字形。Arial是一种无衬线字体，旨在与Helvetica竞争。它的表达类似于Helvetica。支持不同系统的浏览器，兼容性非常好。Tahoma是一种小间距的无衬线字体。支持不同系统的浏览器，兼容性好。它可以解决Helvetica和Arial的缺点，比如难以区分大写I和小写L。SanFranciscoApple在2017年推出了sans-serif字体，这也是苹果系统默认的西文字体。与Helvetica字体相比，SanFrancisco的字体风格更加简洁，减少了一些装饰细节，支持符号整体居中，比如时间显示，之前Helvetica的冒号没有居中。最低兼容版本：ios9、macOS10.11苹果SC（PingFang-Jian）苹果专为中国用户打造的中文无衬线字体。2017年与SanFrancisco一起推出，SC代表简体中文，还有繁体中文和港繁，整体造型简洁美观，是苹果系统默认的中文字体。最低兼容版本：ios9、macOS10.11HiraginoSansGB（冬青黑体）、黑体SC（黑体）Apple系统中较早的中文无衬线字体，为了兼容旧的macOS系统，我们一般都使用它们作为苹方字体的后备。Segoe是Windows系统下的一种无衬线西文字体，也是Windows系统默认的西文字体。微软雅黑（MicrosoftYaHei）Windows系统默认的中文字体也是一套无衬线字体。macOS上的大多数浏览器都预装了微软雅黑，但不包括Safari浏览器。ios和android系统不支持微软雅黑，所以在设置手机字体时可以忽略微软雅黑。宋体是中文衬线字体，windows和macOS都支持。字体细，风格明显。宋体也是WindowsXP及更早系统的默认中文字体。文泉驿微黑（WenQuanYiMicroHei）是Linux系统下默认的中文字体，一般为了兼容Linux系统而设置该字体。RobotoAndroid系统默认的西文字体也是无衬线字体NotoSans(思源黑体)Android系统默认的中文无衬线字体，Google推出的一款开源字体。AppleColorEmoji苹果产品的文字表情在Mac和iOS系统中随处可见，也是曝光率最高的Emoji表情。SegoeUIEmojiWindows10系统中的Emoji表情是黑色的笔触风格，没有苹果的圆润和质感。NotoColorEmojiGoogle的表情和Apple差不多，更讨人喜欢。浏览器默认字体默认字体分为系统默认字体和浏览器默认字体，两者是有区别的。这里讨论的是浏览器默认字体，系统默认字体在后面的system-ui中会介绍。当元素没有指定font-family或者设置的font-family无效时，会回退到浏览器的默认字体。PC端PC端浏览器支持设置不同的默认字体。下图是chrome的配置选项。标准字体是默认字体。未设置font-family属性时将启用此字体。因为宋体是西文字体，对中文无效，浏览器会选择合适的中文字体。Windows上一般是微软雅黑，macOS上一般是苹果平板。但是有些浏览器会根据默认的字体样式选择相似的中文字体。Arial是无衬线字体，浏览器也会选择无衬线字体来适配中文。如果默认字体是衬线字体，那么浏览器会选择衬线中文字体。为了抹平这种差异，我们通常在font-family的末尾设置sans-serif来指定一种sans-serif字体作为封面。移动浏览器通常不支持指定默认字体。ios默认的中文字体是苹方。当lang设置为zh-CN时，西文也为Pingfang。当lang没有设置或设置为en时，默认的西文字体是TimesNewRoman，一种衬线字体。...android的字体有点复杂。它的默认字体是西文：Roboto，中文：NotoSans（思源黑），但不同厂商可能会使用自定义字体，比如部分小米手机使用的是小米兰亭。当androidlang设置为zh-CN或en时，性能也可能不同。虽然都是无衬线字体，但是区别还是很明显的。即使lang设置为zh-CN，不同安卓设备默认的西文字体也可能不同。一个词形容它：混乱。上面提到的手机系统版本：ios9+android4+正是因为浏览器默认字体的复杂性，体现了设置font-family的重要性。system-uisystem-ui为通用字体族，选择当前操作系统下的默认系统字体。它的优点是匹配了当前系统使用的字体，可以让网页和App看起来更加统一。使用字体系列：system-ui；兼容性system-ui发布的比较晚，但是兼容性比较好，目前主流的浏览器都已经支持了。下图是CanIUse上收集到的兼容性信息-apple-system-apple-system是system-ui的兼容写法，在ios和macOS上只支持safari、Firefox、webview等环境。BlinkMacSystemFont也与system-ui兼容。仅在macOSchrome下支持，主要针对chrome53-55。效果是在ios和macOS上。system-ui指向的中文字体是Pingfang，西文字体是SanFrancisco。在android系统下，中文字体通常是NotoSans（思源黑体），西文字体是Roboto。Windows系统一般是微软雅黑，但是在某些Windows系统上字体可能会有问题，所以不建议在Windows上使用system-ui。Sans-serif（无衬线字体）在目前主流的终端设备中，无衬线字体比衬线字体的可读性更好，无衬线字体更适合作为网页默认的全局字体设置。每个系统都会有sans-serif字体，所以sans-serif一般放在最后作为口袋，sans-serif之后的字体不会生效，Emoji字体除外。PC端浏览器可以在设置中指定sans-serif字体。移动浏览器无法在设置中指定无衬线字体。他们会根据lang指定的locale选择合适的字体，可能和system-ui指定的字体不一样。写字体规则在介绍字体规则之前，有几点需要注意：1.不同的平台有不同的预设字体。比如Helvetica和Pingfang只是苹果系统内置的，微软雅黑只是Windows系统内置的（因为很多人安装Office，Mac电脑上也会出现微软雅黑字体），而android和iOS系统不同。2、字体是有版权的，但是如果你不引用外部字体文件（比如Web字体或者App内嵌），而只是在CSS中指定字体名称，则不需要购买授权，因为它只是一个声明，表达期望浏览器更喜欢使用某种字体呈现文本。3、中文网站涉及两种文字：西文字体和中文字体。西文字体包括英文数字，??不包括中文，而中文字体一般包括英文和数字。我们一般先设置西文字体，再设置中文。4.如果字体包含空格或者是中文，需要加引号。5.大多数字体的全名都会包含字重、斜体、简体等特定属性，但一般不建议直接使用。CSS中要设置字体样式，通过font-weight、font-style、font-stretch等属性指定浏览器决定实际渲染的字体。6、font-family是一个可继承的属性，全局的font-family一般设置在body元素上。我们可以总结出字体定义的一般规则如下：1.西文字在前，汉字在后。稍后再定义中文，以达到更好的显示效果。2、优先使用system-uisystem-ui使用当前系统默认字体，使网页风格和操作系统统一，体验更好。3、考虑不同的操作系统在选择字体时，要考虑不同的操作系统，同时也要考虑旧版本操作系统的用户。即使是同一种字体，在不同的操作下也会有细微的差别。尽量同系统使用同一种字体，保证同系统下字体的一致性。对于不同的系统，尽量保证字体样式相似，比如使用无衬线字体。为了保证在苹果系统中使用更优雅的中文字体，首先声明的是苹方字体。对于不支持屏防的低版本macOS，使用HiraginoSansGB（hollyblackbody）字体作为封面。如果需要兼容Linux系统，还需要添加文泉驿微黑（WenQuanYiMicroHei）字体。如果需要兼容不同平台的emoji，一般在sans-serif后加上“AppleColorEmoji”、“SegoeUIEmoji”、“SegoeUISymbol”、“NotoColorEmoji”等字体。4、以serif或sans-serif字体家族结束为了保证在各种环境或条件下正常显示，我们一般把sans-serif放在字体后面，sans-serif字体在显示器上的显示效果更好。5.简洁实用。字体设置越多越好。在满足设计要求的情况下尽量简洁。同一个系统下，中西字体各有回落，没必要过多。通过字体的知识点和字体设置规范介绍了字体设置，总结了全局默认字体的设置方法。手机兼容版本：ios9+、android4+推荐写法：font-family:system-ui,-apple-system,Arial,sans-serif;解读：先用system-ui，再用Arial作为西文字体的fallback，因为它和Helvetica字体兼容，在ios和android上都支持得很好。PC端推荐写法1：macOS系统优先使用系统字体font-family：-apple-system、BlinkMacSystemFont、Tahoma、Arial、“HiraginoSansGB”、“MicrosoftYaHei”、sans-serif；推荐写法二：指定字体家族：Tahoma、Arial、“PingFangSC”、“HiraginoSansGB”、“MicrosoftYaHei”、sans-serif；Windows系统电脑屏幕分辨率普遍不高，Tahoma字体清晰，字号小，结构合理，易于阅读和识别，在不同的操作系统中都有很好的支持，所以作为首选字体，如果系统没有Tahoma预装，使用Arial作为替代。不过两者区别不大，Arial的优先级可以提前。需要兼容Linux系统和表情，可以添加文泉驿微黑和Emoji字体，如：font-family:-apple-system,BlinkMacSystemFont,Tahoma,Arial,"HiraginoSansGB","MicrosoftYaHei","文泉驿微黑",sans-serif,"AppleColorEmoji","SegoeUIEmoji","SegoeUISymbol","NotoColorEmoji";如果想突出macOS和windows的字体特点，可以将Tahoma前面的Helvetica或SegoeUI设置为Preferred字体，如：font-family:"HelveticaNeue","SegoeUI",Arial,"PingFangSC","HiraginoSansGB","MicrosoftYaHei",sans-serif;注：1.字体设置不固定需要??根据业务情况确定标准。以上只是推荐的一种写法。如果设计者有要求，可以在此基础上进行修改。2、css的font-family权重高于浏览器默认字体。有些网站选择不设置font-family，使用浏览器的默认字体，更倾向于用户的选择。这是一个见仁见智的问题。指定元素字体当为元素设置font-family时，全局默认字体对该元素无效。这时候还要考虑字体兼容性问题。最好指定后备字体并以无衬线字体结尾。div{font-faimiy:"PingFangSC",sans-serif;}各大网站字体家族评论先声明以下仅为个人观点，如有错误请指出。首页tahoma,arial,'HiraginoSansGB',\5b8b\4f53,sans-serif\5b8b\4f53为Arial的Unicode编码，可以有效避免浏览器解析CSS代码时出现乱码问题。淘宝首页的默认字体很简单，但macOS上使用的中文字体是无衬线冬青黑体，而Windows上使用的是衬线字体宋体。两种系统字体的区别还是很明显的。京东首页MicrosoftYaHei,HeitiSC,tahoma,arial,HiraginoSansGB,"\5B8B\4F53",sans-serif京东首页使用MicrosoftYaHei作为首选字体，所以中英文都会是MicrosoftYaHei，默认是在macOSsafari中不支持微软雅黑，所以会回退到黑体SC（黑体），而黑体SC（黑体）作为macOS早期版本的默认中文字体，因为铃声被诟病了很久嘴巴设计。当然，这样的设置，京东肯定有他们的考量，但不建议将中文字体放在tahoma、arial等西文字体之前，除非设计师或业务需要。天猫首页“微软雅黑”，SimSun，'\5b8b\4f53'，sans-serifSimSun：也是宋体。天猫首页默认字体设置与京东类似。中英文首选微软雅黑。上面说了，macOSsafari默认是不支持微软雅黑的，所以会回退到Arial这种衬线字体，导致macOS上其他浏览器和Safari浏览器的字体差异很大。下图分别是macOS10.14.5下chrome和safari的效果。腾讯首页'MicrosoftYahei','PingFangSC','Avenir','SegoeUI','HiraginoSansGB',STHeiti,'MicrosoftSansSerif','文泉驿微黑',sans-serif腾讯首页.com也使用微软雅黑作为中西文字的首选字体，在不同的系统上也有相应的回退。理论上是好的，但如前所述，除非设计师或业务需要，否则不建议入手中文字体。新浪微博Arial、“平房SC”、“HiraginoSansGB”、“微软雅黑”、“文泉驿微黑”、sans-serif新浪微博的默认字体都很好用。掘金Homepage-apple-system,system-ui,SegoeUI,Roboto,Ubuntu,Cantarell,NotoSans,sans-serif,BlinkMacSystemFont,HelveticaNeue,PingFangSC,HiraginoSansGB,MicrosoftYaHei,ArialNuggets在这里做了一个是非常明显的错误。其他中英文字体都是在sans-serif之后定义的，因为sans-serif之后定义的中英文字体是无效的。掘金作为高手云集的地方，真不应该犯这种低级错误。segmentfaulthomepage-apple-system,"HelveticaNeue",Helvetica,Arial,"PingFangSC","HiraginoSansGB","WenQuanYiMicroHei","MicrosoftYahei",sans-serif我个人觉得很好。知乎主页-apple-system、BlinkMacSystemFont、HelveticaNeue、PingFangSC、MicrosoftYaHei、SourceHanSansSC、NotoSansCJKSC、文泉驿微黑、sans-serifSourceHanSansSC、NotoSansCJKSC都是思源虽然黑体是一个开源字体，大多数系统都没有内置。不用在这里设置吗？平方SC、HiraginoSansGB、微软雅黑、文泉驿微黑、HelveticaNeue、Arial、头条首页的sans-serif也如前所述，HelveticaNeue、Arial等西文字体建议放在最前面。在此重申一下，以上仅是个人经验观点。如有错误，请指出。浅谈网页字体——默认字体样式设置屏芳SC不应该是手机网页字体的首选iOS9字体介绍与使用
