OS X 中某些元素不显示带有字体的文本

Question

存在一个问题 OS X，其中一些元素没有正确显示文本，即使它旁边有一些元素确实显示。

缩写示例：

字体声明：

@font-face {
    font-family: 'FontFamily';
    src: src: url(data:application/x-font-woff;...);
    font-weight: 700;
    font-style: normal; 
}

CSS

.navbar-collapse > .nav > li > a {
    font-family: "FontFamily", sans-serif;
    font-weight: 700;
    color: #000;
}

HTML

<div class="navbar-collapse">
    <ul class="nav">
        <li><a href="/home">Home</a></li>
        <li class="dropdown">
            <a href="#">Admin</a>
            <ul class="dropdown-menu"></ul>
        </li>
    </ul>
</div>

结果（失踪家 link 以上管理员）：

第二个示例，其中标签高度混乱但文本在标签内可见。再次在非 OS X 设置上正确呈现。

link 在 Chrome/Firefox/IE/Chrome 仿真器中正确呈现，但在所有浏览器（和 iOS）中无法在 OS X 中呈现。

Answer 1

是因为您将 link 设置为白底白字吗？

.navbar-collapse > .nav > li > a {
    font-family: "FontFamily", sans-serif;
    font-weight: 700;
    color: #000000;
}

试试看:)

或者，

.navbar-collapse > .nav > li > a {
    font-family: "FontFamily", sans-serif;
    font-weight: 700;
    color: initial;
}

Answer 2

在对此进行研究后，我发现这应该不是问题。但是，我建议添加不同字体文件类型的完整堆栈。通常，OTF 和 TTF iOS 友好。对于我的网站，我按顺序使用以下内容：

eot
svg
eot?#iefix
woff
ttf

这只是我的偏好，并且已经过测试，适用于所有 browsers/devices。我相信有人可以评论说其他订单可能对他们有用。

Answer 3

我使用此代码以获得最大兼容性，但您必须添加所有格式：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 4

您的代码中存在拼写错误：

您已输入 "src:" 两次

src: src: url(data:application/x-font-woff;...);

也许这段代码可以工作：

src: url(data:application/x-font-woff;...);

Answer 5

事实证明，当使用松鼠字体嵌入（或类似的东西）时，字体中设置的 y 高度存在问题。更改垂直指标选项上的设置可以修复它。

OS X 中某些元素不显示带有字体的文本

Some elements not displaying text with a font-face in OS X

css

macos

font-face

font-family

ios