Font-embedding: what is wrong here?

问题:

I'm still pretty new to html and css, so I might be overlooking things. Been entertaining myself trying to create a little website and arrived at embedding a font to it. It is working in firefox, yet in internet explore it isn't. I do not know about other browsers. Here is a link to the site. Click the L to go to a second page: http://librarchive.com/newcat.html. Due to this there are also some positioning faults, as you can see.

So the font is not correctly working. What do I do?

Here is my css code, i have a .eot and .ttf file of the font:

@font-face{ 
font-family: libralust; 
src: url('Futura_Bk.eot'); /* For IE */ 
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */ 
}

body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}

I've been searching, but am not experienced enough to understand it all. Other commentary about site is appreciated too. Thanks for you help!

回答1:

this a an example of cross-site font embedding has suggested by fontsquirel

@font-face {
    font-family: 'OpenSansLight';
    src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
    src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Now you can figure out what's wrong ?

I'll point another hint : local

For a detailed explanation read this : the-new-bulletproof-font-face-syntax and/or bulletproof-font-face-implementation-syntax

回答2:

Not all browsers support Font-Face and there are lots of font ext; like eot, svg, woff, ttf.

Try this since you only have eot and ttf:

@font-face{ 
    font-family: libralust;
    src: url('Futura_Bk.eot');
    src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
    url('Futura_Bk.ttf') format('truetype');
    font-weight: normal; /* thin? normal? bold? */
    font-style: normal;
}