2013-06-13 4 views
2

글꼴 두께 전환을 적용하는 데 어려움을 겪고 있습니다. 글꼴면 규칙을 사용하여 글꼴을 정의 할 때 실제로 가능합니까? ?글꼴 페이스 규칙을 사용하여 CSS 글꼴 두께 전환을 적용하는 방법

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

색상 전환은 잘 작동하는 것 같다,하지만 글꼴 무게 속성에는 전환은 (는 순간이다)이 없습니다.

+0

가능한 중복 (http://stackoverflow.com/questions/16629725/font-weight-css-transition-in-chrome) – Kyle

답변

2

font-weight 속성을 사용하여 부드러운 전환을 만들 수 없습니다.

카일 세븐 옥스에 감사 [크롬에서 글꼴 - 무게 CSS 전환]이 question