@font-face issue | 易学教程

问题

Hello community!

I am currently working on our own firms web site and I can't seem to get the @font-face to work properly. This is what the css looks like:

@font-face {
    font-family: 'BebasNeue';
    src: url('type/BebasNeue-webfont.eot?') format('eot'),
         url('type/BebasNeue-webfont.woff') format('woff'),
         url('type/BebasNeue-webfont.ttf') format('truetype'),
         url('type/BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
}

#nav li {
    display: inline;
    margin-left: 20px;
    font-family: BebasNeue, Impact;
    font-size: 24px;
    color: #333333;
    letter-spacing: 1pt;
    }

The @font-face import is basically straight from the Font Squirrel @font-face generator. I haven't yet found out whats wrong and thats why I'm reaching out. I edited the font-family names and the location of the fonts (../type/).

Any help is appreciated, tell me if you need to see any other code that might be relevant to this issue. Cheers.

回答1:

to the best of my knowledge, this is the most universal way to implement @font-face:

@font-face{
    /* for IE only (IE doesn't apear to comprehand normal CSS)*/
    font-family: "my fancy font";
    src: url("/fonts/font.eot");
}

@font-face{
    /* for non CSS-challenged browsers */
    font-family: "my fancy font";
    src: local("☼"),
        url("/fonts/font.eot") format('eot'),
        url("/fonts/font.woff") format('woff'),
        url("/fonts/font.otf") format('otf'),
        url("/fonts/font.ttf") format('truetype'),
        url("/fonts/font.svg") format('svg');
}

two @font-face sections and something that can't possibly be a filename in src: local()

回答2:

These types of questions cannot always be answered without a URL to poke around. The syntax looks fine, but you probably have other issues. For instance, are you serving with IIS? Have you used IE9's developer tools to see if the font is loading?

来源：https://stackoverflow.com/questions/5586598/font-face-issue

标签

css

font-face