跨浏览器@ font-face使用

时间:2012-03-01 16:03:32

标签: css3 cross-browser font-face custom-font

我在使用自定义字体和@font-face方面遇到了很多困难。我试图在最新版本的Chrome,Safari和amp;中获得一致的字体Firefox(在下面的屏幕截图中按顺序显示:

enter image description here

我正在使用以下内容生成此内容:

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

我已经尝试过所有font-weight庄稼减轻重量,但没有任何影响它们。我确实使用Chrome下面的CSS3 hack让它看起来像我的PSD,但这在其他浏览器中不起作用:

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

在我跳出窗外之前有没有人有任何建议!!

请注意,我无法使用FONT SQUIRREL!

1 个答案:

答案 0 :(得分:2)

试试这样:

@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文件。如果它已经显示为粗体,则字体将无法缩小,因为这是字体的正常外观。