Question

我已经通过@ font-face加载了一些特殊字体。字体加载，并且通常在所有浏览器中wotk，但是它们不会在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函数（翻转），我试图取消注释该函数，但字体呈现错误。

我已经将问题缩小到我在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。

使用Safari进行字体表面渲染

1 个答案: