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

颜色转换似乎工作正常，但字体权重属性没有转换（它是瞬时的）。

Answer 1

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

感谢Kyle Sevenoaks和question

如何使用font-face规则应用css字体权重转换

1 个答案: