如何使用字体face规则应用CSS字重过渡效果

Question

我想让字体的加粗过渡效果生效，但是在使用font-face规则定义字体时，这是否可能实现？

@font-face {
    font-family: 'HelveticaNeue';
    src: url('fonts/275542_0_0.eot');
    src: url('fonts/275542_0_0.eot?#iefix') format('embedded-opentype'),
        url('fonts/275542_0_0.woff') format('woff'),
        url('fonts/275542_0_0.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'HelveticaNeue';
    src: url('fonts/275542_1_0.eot');
    src: url('fonts/275542_1_0.eot?#iefix') format('embedded-opentype'),
        url('fonts/275542_1_0.woff') format('woff'),
        url('fonts/275542_1_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

ul.site_menu > li {
    font-family: HelveticaNeue;
    font-weight: 400;
    font-size: 160%;
    padding: 6px;
    display: inline;
    text-align: center;
    cursor: pointer;
    -moz-transition:color 0.5s, font-weight 0.5s;
    -webkit-transition: color 0.5s, font-weight 0.5s;
    -o-transition: color 0.5s, font-weight 0.5s;
    transition: color 0.5s, font-weight 0.5s;
}

ul.site_menu > li:hover {
    color: #333;
    font-weight: 700;
    -moz-transition:color 0.5s, font-weight 0.5s;
    -webkit-transition: color 0.5s, font-family 0.5s;
    -o-transition: color 0.5s, font-weight 0.5s;
    transition: color 0.5s, font-weight 0.5s;
}

颜色过渡看起来没问题，但字体粗细属性没有过渡效果（它是瞬间的）。

- Aidan Ewen

---

可能是Chrome中的字重CSS过渡的重复问题。 - Kyle

Answer 1

使用font-weight属性无法创建平滑过渡效果。

感谢Kyle Sevenoaks和这个问题

- Aidan Ewen