开发者

@font-face issue

开发者 https://www.devze.com 2023-02-23 12:05 出处:网络
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.

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/开发者_JAVA百科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.


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()


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?

0

精彩评论

暂无评论...
验证码 换一张
取 消