跨浏览器@font-face 使用答案

【问题标题】：Cross browser @font-face use跨浏览器@font-face 使用
【发布时间】：2012-03-20 03:29:24
【问题描述】：

我在使用自定义字体和@font-face 时遇到了很多困难。我正在尝试在最新版本的 Chrome、Safari 和 Firefox 中获得一致的字体（在下面的屏幕截图中按顺序显示：

我正在使用以下内容来生成这个：

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

还有：

.menu-button a {
    height:25px;
    float:left;
    border-bottom:2px solid white;  
    color:#ccccff;
    text-decoration:none;
    padding:8px 21px 0px 20px;
    text-align:center!IMPORTANT;
    background-color:#00378f;
    font-size:18px;
    font-family:'dineng', Arial;
    text-shadow:0 0 1px rgba(0,0,0,0.3);
    }

我已经尝试了所有的字体重量来减少重量，但没有任何影响。我确实在 Chrome 上使用了下面的 CSS3 hack，让它看起来像我的 PSD，但这不适用于其他浏览器：

text-shadow:0 0 1px rgba(0,0,0,0.3);

在我跳出窗外之前有没有人有什么建议！！

请注意我无法使用 FONT SQUIRREL！

【问题讨论】：

您能否发布一个 URL，以便我们查看您的其他 CSS？看起来正在应用假粗体。与您的字体语法无关。
@FontSquirrel 这是主菜单 - mediwales.com/v3
您是否尝试过删除文本阴影样式？这就是我猜你为什么会有粗体、不一致的渲染......
@FontSquirrel 是的，阴影是减轻重量的唯一方法。在 Fontbook 中查看字体时，字体看起来不是粗体。

标签： css cross-browser font-face custom-font

【解决方案1】：

试试这样：

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

否则，请在您的计算机上打开 .TTF 文件。如果它已经显示为粗体，则字体将无法缩小，因为这是字体的正常外观。

【讨论】：