0

我在 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 上，字体显示正确：

野生动物园 6

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

野生动物园 5

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

4

1 回答 1

0

事实证明 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 文件提升到顶部。

于 2013-03-24T16:11:38.897 回答