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

【问题标题】：Some elements not displaying text with a font-face in OS X某些元素在 OS X 中不显示带有字体的文本
【发布时间】：2015-05-07 15:14:54
【问题描述】：

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>

结果（管理员上方缺少主页链接）：

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

该链接在 Chrome/Firefox/IE/Chrome 模拟器中正确呈现，但在所有浏览器（和 iOS）中的 OS X 中无法呈现。

【问题讨论】：

你怎么知道font-face/font-family有问题？
我不知道！但我使用的是自定义不要，所以我想我应该提到它。
无法正确加载字体的典型行为是您获得的是默认字体而不是自定义字体。您能否提供一个小提琴或bootply 示例来显示该行为？由于显示了另一个链接，并且它应用了相同的 font-family 规则，因此问题很可能是其他问题。

标签： ios css macos font-face font-family

【解决方案1】：

是因为您将链接设置为白色背景上的白色吗？

.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;
}

【讨论】：

这就是为什么制作小例子永远行不通的原因:(。修复了示例的颜色。
您有该页面的链接吗？ :)

【解决方案2】：

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

等
svg
eot?#iefix
哇
ttf

这只是我的偏好，并且已经过测试可以在所有浏览器/设备上运行。我相信有人可以评论说其他订单可能对他们有用。

【讨论】：

【解决方案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 */
}

【讨论】：

【解决方案4】：

您的代码中有一个拼写错误：

你已经输入了两次“src:”

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

也许这段代码会起作用：

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

【讨论】：

【解决方案5】：

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

【讨论】：