@ 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

问题描述

我在Safari 5中显示引号和重音出现了一个怪异的问题.我正在使用带有以下代码的字体字体.

I'm having a weird issue with the displaying of quotes and accents in Safari 5. I'm using a font-face font with the following code.

@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上，字体正确显示:

On Firefox, Chrome, Safari 6, iOS6 and IE the font are displayed correctly:

但是在Safari 5上却看到了这一点:

On Safari 5 however I'm seeing this:

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

Same charset, same html. I've searched everywhere for reported issues with font-face displaying under Safari 5 but there aren't any reports leading me to suspect something else is going on. Anyone have any idea what could going on here?

推荐答案

结果表明Safari 5不以SVG字体显示重音符号.

Turns out Safari 5 does not show accents or symbols in SVG fonts.

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

It does show them when using TTF or WOFF fonts, but not in SVG.

Chrome或Safari 6似乎没有此问题.

Chrome or Safari 6 do not seem to have this problem.

我最终通过使用@ font-face定义了单独的字体，然后使用特定于浏览器的CSS定位Safari 5来解决了该问题.所以:

I ended up fixing it by defining a separate font with @font-face, and then targetting Safari 5 with browser specific CSS. So:

/* 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中启用Web字体的正确呈现.使用标准的fontsquirrel生成的代码，这会导致令人讨厌的锯齿现象，而不是别名字体.在Google共同行动之前，一种解决方法是将SVG文件提升到顶部.

Please note that this code already contains a fix to enable correct rendering of webfonts in Chrome under PC. With the standard fontsquirrel generated code, this leads to horrible jaggyness and not aliased fonts. Until Google can get its act together, a fix is to elevate the SVG file to the top.

这篇关于@ font-face字体的符号未在Safari 5中显示，在Safari 6和其他浏览器中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！