2

I'm struggling to get my font-weight transition to apply - Is this actually possible when I'm defining my font using a font-face rule?

@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;
}

The color transition seems to work fine, but there's no transition on the font-weight property (it's instantaneous).

4

1 回答 1

2

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

感谢 Kyle Sevenoaks 和这个问题

于 2013-06-13T10:57:46.973 回答