如何将css字体粗细过渡应用于字体面规则



我正在努力让我的字体重量转换应用-这实际上是可能的,当我使用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;
}

颜色过渡看起来很好,但是font-weight属性没有过渡(它是瞬时的)

不能使用font-weight属性创建平滑过渡。

感谢Kyle Sevenoaks和这个问题

相关内容

  • 没有找到相关文章

最新更新