跨浏览器@ font-face使用 [英] Cross browser @font-face use

问题描述

我使用自定义字体和 @ font-face 时遇到很多困难。我试图得到一个字体一致的最新版本的Chrome，Safari& Firefox（按照以下屏幕截图中的顺序显示）：

I've been having a lot of difficulties with using custom fonts and @font-face. I'm trying to get a font consistent across the latest versions of Chrome, Safari & Firefox (shown in that order in the screenshot below:

我使用以下代码生成：

@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);
    }

我试过重量，但没有什么影响。我使用下面的CSS3黑客在Chrome下，使它看起来像我的PSD，但不能在其他浏览器工作：

I've tried all manor of font-weight's to decrease the weight but nothing effects them. I did use the CSS3 hack below on Chrome to get it to look like my PSD but that doesn't work across the other browsers:

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

在跳出窗口之前，任何人都有任何建议！

Does anyone have any suggestions before I jump out the window!!

请注意，我无法使用正面字符！

推荐答案

尝试如下：

@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文件。如果它已经显示为粗体，字体将不能减小大小，因为这是字体的正常外观。

Otherwise, open the .TTF file on your computer. If it already appears bold, the font WILL NOT be able to be decreased in size because that's the normal look for the font.

这篇关于跨浏览器@ font-face使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！