使用addClass進行動畫製作改變字體重量

我遇到了一個很奇怪的問題。幸運的是，你可以看到這個問題，我在這裏上傳的文件：使用addClass進行動畫製作改變字體重量

http://www.unf.edu/~n00804716/untitled%20folder/index.html

這需要觀察的SAFARI。要完全理解類型面應該是什麼樣子，在其他瀏覽器中它不會改變，所以只能看到粗體。

在這個網站上，我用.addClass實現了懸停。當您將鼠標懸停在頂部欄上（任何帶有數字的彩色框）時，您會看到該欄下方的徽標向上滑動並失去其不透明度。我真正的問題是字體重量。當你將鼠標懸停在頂欄上時，你會發現所有的白色文字都失去了一點點的重量，變得更薄。然後當動畫完成時，它會返回到更大膽的外觀。類型臉的真實外觀是更薄的版本，我找不到一種方式讓類型臉看起來像這樣。

我已經嘗試過幾乎DOM中的每個元素上的font-weight：normal，但仍然無法使其工作。我也試着將這種規則機體：

-webkit-font-smoothing: subpixel-antialiased;

但這只是防止變瘦上懸停的類型，並保持它在這兩個州大膽。查看上面鏈接的頁面時，您可以輕鬆查看Web檢查器中每個元素的CSS和HTML。我知道這應該是一個簡單的問題，我似乎無法弄清楚。

這是我的@ font-face規則的CSS。該類型的臉了DIN接下來LT臨超輕冷凝以較大的數字和DIN下一步臨大膽的小副本：

@font-face { 
    font-family:'DINNextLTPro-UltraLightCond'; 
    src: url('fonts/DINNextLTPro-UltraLightCond_gdi.eot'); 
    src: url('fonts/DINNextLTPro-UltraLightCond_gdi.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINNextLTPro-UltraLightCond_gdi.woff') format('woff'), 
     url('fonts/DINNextLTPro-UltraLightCond_gdi.ttf') format('truetype'), 
     url('fonts/DINNextLTPro-UltraLightCond_gdi.svg#DINNextLTPro-UltraLightCond') format('svg'); 
    font-weight: 250; 
    font-style: normal; 
    font-stretch: condensed; 
    unicode-range: U+0020-25CA; 
}

來源

2015-11-05 Austin Branham

我可能是盲目的，但我無法注意到有什麼不同。你使用的是什麼瀏覽器？ –

@ user3515065哎呀，完全忘了提及你需要在safari中查看它。沒有在FF中檢查過，但在Chrome中沒有發生 –

@ user3515065但不管如何，任何瀏覽器中的任何人都可以使字體重量正常（比出現的更薄），這是一個巨大的幫助。 –

父元素強制硬件加速似乎解決了問題

-webkit-transform: translateZ(0px);

來源

2015-11-06 01:54:43

使用addClass進行動畫製作改變字體重量

回答

相關問題