Cross browser @font-face use

问题

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:

I'm using the following to generate this:

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

And:

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

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!!

PLEASE NOTE THAT I'M UNABLE TO USE FONT SQUIRREL!

回答1:

Try it like this:

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

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.

来源：https://stackoverflow.com/questions/9519560/cross-browser-font-face-use

标签

css3

cross-browser

font-face

custom-font