1

在我正在开发的网站上，我在@font-face 渲染方面遇到了两个问题——Android 版 Chrome（在三星 Galaxy S 上测试）和 Win7 版 Chrome。两个最新版本。

这些问题在视觉上略有不同，但我认为与同一件事有关。

这里有几张截图可以更好地向你介绍我在说什么

Android - 正确

适用于 iPhone/Android 的 Chrome（用户代理）- 好的

在此处输入图像描述

适用于 Android 的 Chrome - 错误

在此处输入图像描述

适用于 Ubuntu 的 Chrome - 好的

在此处输入图像描述

Chrome for Win7 - 错误

因此，如您所见，Chrome for Android 中的字体未正确呈现 - 它显示一些默认字体，而不是我们正在使用的字体（farnhamdisplay）。另一方面，它在 Chrome 用户代理和 iPhone 版 Chrome 中运行良好。

第二个问题...相同的字体...它在顶部被剪掉，仅在 Windows 7 的 Chrome 中。另一方面，适用于 Ubuntu 的 Chrome 可以正常工作。

这也适用于任何其他浏览器（Firefox，IE，...）

这里还有一个 CSS 代码示例（移动版）：

@font-face {
    font-family: 'Farnhamdisplay-regular';
    src: url('../fonts/farnhamdisplay-regular.eot');
    src: url('../fonts/farnhamdisplay-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/farnhamdisplay-regular.svg#proxima_nova_ltregular') format('svg')
        url('../fonts/farnhamdisplay-regular.woff') format('woff'),
        url('../fonts/farnhamdisplay-regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

#navigation {
    display:inline-block;
    vertical-align:top;
    padding-left:48px;
    font:27px/29px "Farnhamdisplay-regular";
    text-transform:uppercase;
    text-decoration: none;
    margin:18px 0 0 31px;
    color:#333;
    letter-spacing:2px;
}

有人对此有任何想法吗？我偶然发现了一些类似的问题，据我所知，这可能是 Chrome 方面的问题。例如，它适用于 Google 字体，但不适用于某些自定义 TypeKit 字体等。

4

0 回答 0