CSS font-face does not work

问题:

I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:

@font-face
{
    font-family: myFirstFont;
    src: url('ellis.ttf');
}

body
{
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    font-size: 11px;
    line-height: 1;
    font-family: myFirstFont,arial,san-serif;
    overflow:auto;
    background:#ecf6f7;
}

I know this is not a cross browser case, but I am trying to make work a simple case at first.

回答1:

on both the font-family declarations add speech marks.

so add to both @font-face and body:

font-family: "myFirstFont";

Or alternatively try this to make sure all code is correct and to make sure its not the code:

http://www.fontsquirrel.com/fontface/generator

It also may sound stupid, but make sure all spellings of fonts and paths are correct.

回答2:

Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.

If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.

回答3:

apply font like this..

@font-face
{
    font-family: 'ellis';
    src: url('ellis.ttf');
}
.body
{
    font-family: "ellis";
}