字体加粗造成文字抖动

解决思路：为文字预留宽度

<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 的升级和优化。