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

Question

我在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下的字体显示报告问题，但是没有任何报告让我怀疑其他事情正在发生。任何人都知道这里会发生什么？

Answer 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中的网页字体。使用标准的fontsquirrel生成的代码，这会导致可怕的锯齿状而不是混淆字体。在谷歌能够共同行动之前，我们需要解决的问题是将SVG文件提升到最高位置。