今天，我读了一篇关于Web中默认字体样式的老文章《随网之舞》。事实上，我们在工作中经常遇到这样的问题。在项目验收结束时，产品经常提出一些字体问题：
为什么下划线如此贴近字体？
数字和中文字体不在同一水平线上？
英文字母怎么比中文字高？
作为一名前端工作者，收到这样的项目体验文件，有时会感到更痛苦，可能会默默地抱怨。事实上，这些都是更详细的问题，为了追求更好的用户体验，需要处理。下面简单说一下Web中的默认字体样式:、
三层控制页面样式：
第一层是浏览器的默认风格，
第二层是网页定义风格，
第三层是用户自定义的风格。
和CSS一样，后面的优先级高于前面的，也就是说，网页定义风格可以覆盖浏览器的默认风格，而用户自定义风格的优先级最高。实际情况是，虽然浏览器或多或少提供了用户自定义风格的功能，但很少有用户自定义，通常是高级用户。浏览器默认风格在不同的浏览器、不同的语言版本甚至不同的系统版本中往往有不同的设置，导致如果直接使用默认风格页面在每个浏览器下显示非常不一致，所以有类似的YUIreset试图重写浏览器默认设置，以确保每个浏览器风格的一致性。
以字体为例。每个浏览器的默认字体类型、大小和行高都不同。例如，IE8的中文版本在Windows中 XP下显示网页时，默认字体是宋体，但英文版肯定不会。因此，为了达到一致的显示效果，我们需要设置默认的字体样式，以保证设计的一致性，提高开发效率。
以后准备使用以下默认字体样式：
body{font:12px/1.5 arial;}
字体：arial
我们页面的大部分内容字符都是中文的。毫无疑问，到目前为止，网页上最常用、最常用的显示中文字体是宋体，但宋体在显示英文、数字和英文符号时过于糟糕，例如©字符，所以我们通常希望通过CSS实现更好的字体风格来显示它们，然后用宋体来显示中文和中文符号。选择arial的原因是：
Windows和Mac都预装了这个字体，应该是使用最广泛的网页字体。它的潜在对手tahoma和helvetica就没那么幸运了。
视觉设计专业人士可能会认为在Windows中使用tahoma、最好在Mac中使用helvetica。例如，淘宝的默认字体风格是fonttica: 12px/1.5 Tahoma, Helvetica, Arial, “\5b8b\4f53” sans-serif;
这是一个很好的选择，但是你也会发现Googlegleglogle、YAHOO、Youtube、新版本的Bing甚至MSN都使用arial作为第一个默认字体。所以arial在美观和可读性方面应该是完全可以接受的。
一般来说，font-family的设置会在最后设置一个通用字体系列，以确保其安全。例如，谷歌的设置是font-family-family:arial,sans-serif;，但至少在非中文版Win7下编码为GBK时，IE8会因sans-serif渲染宋体，导致字体变形，这就是为什么淘宝需要在sans-serif之前添加宋体，而google不需要这样做。
由于中文字体的选择非常有限，所有主流浏览器都使用宋体来显示中文。
由于中文字体的选择非常有限，所有主流浏览器都使用宋体来显示中文。Baidu的主页和搜索结果页使用font-family:arial;这样做的安全性可以从侧面说明。有些人可能会注意到，Firefox中文版默认显示的中文字体是微软优雅的黑色，因为智能网络擅自修改了用户的定制风格，不允许网页的风格覆盖浏览器设置的风格。由于类似的情况，弹性设计网页非常重要。
使用英文字体作为第一个默认字体会导致的问题之一是中英文和符号混合排列的对齐问题。大多数情况可以通过设置行高和haslayout来解决，但它们不是很完美。如果将字体改为“宋体”，则可以完全解决问题。很明显，这个问题只出现在IE上。因此，如果您的网站很少使用英文、数字和英文符号，则直接设置{font-family:\5b8b\4f53;}这也是一个合理的选择。
大小：12px
12px是宋体能显示的极限。虽然微软雅黑可以显示较小的字体，但目前的应用环境还不成熟。12px成为最常用的字体大小，因为宋体基本上是目前唯一显示中文的通用Web字体。当然，我们可以根据产品的需要来修改这个默认值。
不需要考虑字体的大小（em）的设计。
在Chrome3.0后的中文版中，字体大小的最小值为12px，例如，您将最小字体设置为10px，最后变为12px。至于在谷歌浏览器下设置字体<12px的方法，可以看看之前写的一篇文章:Chrome苹果浏览器字体大小控制问题
行高：1.5倍
这是一个经验值，不同的产品可能对这个值有不同的要求，但我们通常设置最常用的默认值。例如，YUI的font是font:13px/1.231 arial,helvetica,clean,sans-serif;也就是说，字体大小的默认值为13px，行高为13*1.231=16.003px，默认行高为默认字体的1.231倍。对于中文，常用字体大小为12px、14px、16px、在IE6和IE7中设置18px等偶数的行高也可以解决特殊情况下的字体问题。
在IE6和IE7中，行高值必须大于字体的2px，以确保字体的完整显示或作为链接有效显示下划线。
设置line-height时，注意不要使用单位(包括%)，因为子节点会继承运算后的line-height值，所以浏览器在使用单位后会将line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的值表示是容器的font-size的倍数。因此，将数值设置为无单位是最佳选择。
深入CSS 很有利于理解line-height，值得一读。
深入CSS 很有利于理解line-height，值得一读。
性能和效率
大多数平台都有arial，以减少浏览器的搜索时间。
代码最少，书写方便。arial基本上是名字最短的字体，可以节省CSS的大小。
所有字母都是小写的。目前谷歌就是这样做的。优点是可以写得更快，提高Gzip压缩的效率。
中文最好用unicode表示，比如宋体是用来表示的{font-family:\5b8b\4f53;}，使用微软雅黑是的{font-family:\5fae\8f6f\96c5\9ed;}，其优点是避免编码问题，并得到所有主流浏览器的支持。使用正确的字体类型写法，避免使用引号，从而缩小CSS的大小。中文字体可以按照上一种方式编写。
未来
通过对中英文和符号混合排的测试，我发现微软雅黑实际上表现得很好，包括英文数字和英文字符，以及IE6和IE7的显示效果，但唯一的遗憾是，如果安装微软雅黑字体的用户在XP下没有打开“使用屏幕字体边缘光滑”选项，Firefox、Safari和Opera、尤其是IE6下会很模糊，很难辨认。目前还没有很好的解决方案来解决这个问题，所以只有在IE6使用率很小的时候才能正式使用。XP死亡可能需要到2014年。
虽然很早就有了@font-face，但由于浏览器的支持、网速和商业问题，很少使用浏览器。Firefox3.6最近关于字体的好消息将支持Web Open Font Forma。您可以看到Web字体未来的相关信息 字体的未来，关于 Web 字体：现状与未来和谈 Web 字体的现状和未来。
总结：
如果你想成为一名专业的前端攻城师，你必须注意这些细节。毕竟，这是为了更好的用户体验。
