使用 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 函数（翻转），我试图取消注释该函数，但字体呈现错误。

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