將display：inline-block添加到：before或之後將使webfont消失

我在:after僞類中使用了Web字體。它在Desktop Chrome和Android Chrome上表現良好，但在iOS Chrome和Safari（iOS 7.1.2,9.2.1和9.3.1）中消失，除非我註釋掉display:inline-block和position:absolute，然後它會立即將圖標顯示在右側沒有寬度。將display：inline-block添加到：before或之後將使webfont消失

@font-face { 

    font-family: 'myFont'; 
    src: url('/channels/myFontFolder/fonts/myFont.eot'); 
    src: url('/channels/myFontFolder/fonts/myFont.eot?#iefix') format('embedded-opentype'), 
     url('/channels/myFontFolder/fonts/myFont.woff2') format('woff2'), 
     url('/channels/myFontFolder/fonts/myFont.woff') format('woff'), 
     url('/channels/myFontFolder/fonts/myFont.ttf') format('truetype'), 
     url('/channels/myFontFolder/fonts/myFont.svg#my_Font') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
    text-rendering: optimizeLegibility; 
} 


h2 { 

    padding: 10px; 
    cursor: pointer; 
    margin: 0; 
    border: none; 
    border-top: 1px solid $table-row-border-colour; 
    background: none; 
    font-size: $body-fontSize; 
    position: relative; 

} 

h2:after { 

    content: "\e101"; 
    font-family: myFont; 

    display: inline-block; 
    position: absolute; 
    background: none; 
    color: green; 
    font-size: 20px; 
    width: 20px; 
    height: 20px; 
    border: 1px solid red; 
    right: 0; 
    top: 0; 

}

它在另一個元素上正常工作，據我所知，應用了相同的樣式。

任何幫助，將不勝感激！

來源

2016-04-29 Luke Burrows

修好了，需要加字體重量：大膽

來源

2016-04-29 15:43:18

將display：inline-block添加到：before或之後將使webfont消失

回答

相關問題