css @font-face doesn't work [duplicate]

问题

I need to set a font family in my web page with thte @font-face, but I can't make it work propertly: This is the content of my css file

@font-face {
    font-family: knockout;
    src: url('../fonts/knockoutHTF27.ttf');
}

body {
    font-width: normal;
    font-size: 20px;
    font-family: knockout !important;
    color: #223041;
    text-align: center;
}

I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?

回答1:

You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Then, use it like this:

body {
    font-family: 'MyWebFont', Fallback, sans-serif;
}

As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.

回答2:

Try after removing ''

src: url(../fonts/knockoutHTF27.ttf);

回答3:

You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path

来源：https://stackoverflow.com/questions/24695818/css-font-face-doesnt-work

标签

css

font-face

font-family