问题:

I'm trying to use @font-face to implement a font I downloaded online (http://www.losttype.com/font/?name=blanch) and I'm having issues getting it to work on any browser. Here's the sample code I'm using to test the font.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class = "title">
        <p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
    </div>
</body>
</html>

And the css file is:

@font-face {
    font-family: Blanch;
    src: url(‘BLANCH_CONDENSED.ttf’);
}
.title {
    text-align:center;
    font-family: Blanch, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

I only have the .ttf file. Can someone explain why this isn't working?

回答1:

In the construct url(‘BLANCH_CONDENSED.ttf’), the ‘smart’ single quotes must be replaced by Ascii quotes (single or double), e.g. url('BLANCH_CONDENSED.ttf').

You should also use FontSquirrel webfont generator or some similar tool to generate different font formats to cover all browsers.