使用Safari進行字體表面渲染

Question

我已通過@ font-face加載了一些特殊字體。字體加載，並正常在所有的瀏覽器中，但它不會在Safari中呈現。在選擇具有特殊字體的元素後，字體會呈現。字體加載與CIA CSS喜歡：

@font-face { 
    font-family: 'Brandon'; 
font-style: normal; 
font-weight: bold; 
src: url('../fonts/brandon_bold.woff') format('woff'); 
} 

@font-face { 
font-family: 'Brandon-Regular'; 
src: url('../fonts/Brandon_reg.otf'); 
} 

元素有一個jQuery函數（翻轉）和我曾試圖取消對功能，但字體渲染錯誤nontheless。

我已經縮小的問題，以我的轉變是在CSS做過這樣的：

-ms-transition-property: all; 
-ms-transition-duration: 2s; 
-ms-transform: rotateX(0deg); 
-webkit-transition-property: all; 
-webkit-transition-duration: 2s; 
-webkit-transform: rotateX(0deg); 
-o-transition-property: all; 
-o-transition-duration: 2s; 
-o-transform: rotateX(0deg); 
-moz-transition-property: all; 
-moz-transition-duration: 2s; 
-moz-transform: rotateX(0deg); 
transform: rotateX(0deg); 

如果我取消了-webkit-部分，字體正常工作，但過渡（自然）不。任何幫助將會很受歡迎！感謝所有的讀者和提前回復！

Answer 1

您的元素應呈現爲塊元素。試試display: block或display: inline-block。