解决思路：为文字预留宽度
<ul> <li title="title 1">title 1</li> <li title="title 2">title 2</li> <li title="title 3">title 3</li> </ul>// 伪元素的作用就是撑开宽度，为字体加粗预留宽度ul>li::after{ display:block; content:attr(title); font-weight:bold; visibility:hidden; height:1px; color:transparent; margin-bottom:-1px; overflow:hidden;} content 属性取值 content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit; attr(attribute)：获取元素指定属性的值counter：
counter-reset：命名和重置counter-increment：每次增加的值默认是1，只要有counter-increment，对应的计数器的值就会变化counter()：只是输出而已,用来输出序号counters()：可以实现自子序号（1-1，1-2..）.xxx { counter-reset: apple 2; // 命名 apple，不会显示在页面上。序号从 2 开始。 counter-increment: apple; // 参数是计数器的名字}.counter:before { content: counter(wangxiaoer); // 只是输出而已 counter-increment: wangxiaoer; } chrome 的字体平滑 font-smoothing但是在 windows 下面看不出效果，所以只在 mac 上面有用。
Chrome 等 webkit 浏览器使用的是 -webkit-font-smoothing，Firefox 浏览器下是 -moz-osx-font-smoothing，
取值：antialiased
字体像素级平滑，在深色背景上会让文字看起来更细了。
网页中的小图标应该使用矢量图标，可以保证图片的放大不会失真。
字体库：设计师喜欢使用的字体，比如‘方正悠黑’，Helvetica(黑体，只有英文) ，但是这些字体系统不自带或者windows不自带，需要自行打包放到字体文件夹中。需要维护一个字体文件库。
Helvetica Neue 整体比 Helvetica 更趋近完美，可选的字重也更多。是 Helvetica 的升级和优化。