跨浏览器使用@font-face字体

Question

我一直在使用自定义字体和@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！

- Rob

---

你能发一个URL让我们看看你的其他CSS吗？看起来似乎应用了假粗体。这与你的字体语法无关。 - Font Squirrel

@FontSquirrel 这是主菜单 - http://www.mediwales.com/v3/ - Rob

你尝试过移除text-shadow样式吗？我猜这可能是为什么你的渲染看起来粗体且不一致的原因。 - Font Squirrel

@FontSquirrel 是的，阴影是减少字体重量的唯一方法。在Fontbook中查看时，字体并不会看起来加粗。 - Rob

Answer 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文件。如果它已经显示为粗体，那么该字体将无法缩小大小，因为这是该字体的正常外观。

- justiceorjustus