@font-face 字体中的符号在 Safari 5 中不显示，在 Safari 6 和其他浏览器中正确显示答案

【问题标题】：Symbols in @font-face font are not displayed in Safari 5, are displayed correctly in Safari 6 and other browsers@font-face 字体中的符号在 Safari 5 中不显示，在 Safari 6 和其他浏览器中正确显示
【发布时间】：2013-03-25 00:11:38
【问题描述】：

我在 Safari 5 中显示引号和重音符号时遇到了一个奇怪的问题。我正在使用带有以下代码的 font-face 字体。

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

在 Firefox、Chrome、Safari 6、iOS6 和 IE 上字体显示正确：

在 Safari 5 上，我看到了这个：

相同的字符集，相同的 html。我到处搜索有关在 Safari 5 下显示字体的报告问题，但没有任何报告让我怀疑发生了其他事情。有人知道这里会发生什么吗？

【问题讨论】：

标签： safari webkit font-face

【解决方案1】：

事实证明 Safari 5 不会在 SVG 字体中显示重音符号或符号。

在使用 TTF 或 WOFF 字体时会显示它们，但在 SVG 中则不会。

Chrome 或 Safari 6 似乎没有这个问题。

我最终通过使用@font-face 定义一个单独的字体来修复它，然后使用特定于浏览器的 CSS 来定位 Safari 5。所以：

/* Font-face for all browsers */
@font-face {
    font-family: 'MendozaRomanStd-Book';
    src: url('fonts/mendozaromanstd-book.eot');
    src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
         url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
         url('fonts/mendozaromanstd-book.woff') format('woff'),
         url('fonts/mendozaromanstd-book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    /* Safari5 fix */
@font-face {
    font-family: 'MendozaRomanStd-Book2';
    src: url('fonts/mendozaromanstd-book.ttf') format('truetype') !important;
    font-weight: normal;
    font-style: normal;
}

.safari5 body {
font-family: 'MendozaRomanStd-Book2', Times new roman, serif;
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}

请注意，此代码已经包含一个修复程序，可以在 PC 下的 Chrome 中正确呈现 webfonts。使用标准的 fontsquirrel 生成的代码，这会导致可怕的锯齿而不是别名字体。在 Google 能够齐心协力之前，解决方法是将 SVG 文件提升到顶部。

【讨论】：