将 display:inline-block 添加到 :before 或 :after 将使 webfont 消失答案

【问题标题】：Adding display:inline-block to :before or :after will make webfont disappear将 display:inline-block 添加到 :before 或 :after 将使 webfont 消失
【发布时间】：2016-04-29 15:36:01
【问题描述】：

我在:after 伪类中使用网络字体。它在桌面 Chrome 和 Android Chrome 上显示良好，但在 iOS Chrome 和 Safari（iOS 7.1.2、9.2.1 和 9.3.1）上它会消失，除非我注释掉 display:inline-block 和 position:absolute，然后它会立即显示图标向右，没有宽度。

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

}

据我所知，它在另一个元素上运行良好，并且应用了相同的样式。

任何帮助将不胜感激！

【问题讨论】：

标签： ios css safari mobile-safari font-face

【解决方案1】：

已修复，需要添加 font-weight: bold

【讨论】：