CSS font-face在Firefox中不工作

我在下面有這個字體的臉部代碼，它在谷歌瀏覽器中工作正常，但它在Firefox中完全不起作用？爲什麼？CSS font-face在Firefox中不工作

<style type="text/css"> 
    @font-face { 
    font-family: 'Lato'; 
    src: url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot'); 
    src: url('http://www.website.com/fonts/ca/Lato-Reg.ttf') format('truetype'), 
     url('http://www.website.com/fonts/ca/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'), 
     url('http://www.website.com/fonts/ca/Lato-Reg-webfont.woff') format('woff'), 
     url('http://www.website.com/fonts/ca/Lato-Reg-webfont.svg#LatoRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'LatoBold'; 
    src: url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot'); 
    src: url('http://www.website.com/fonts/ca/Lato-Bol.ttf') format('truetype'), 
     url('http://www.website.com/fonts/ca/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'), 
     url('http://www.website.com/fonts/ca/Lato-Bol-webfont.woff') format('woff'), 
     url('http://www.website.com/fonts/ca/Lato-Bol-webfont.svg#LatoBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

nav ul li{ 
    font-family: 'LatoBold', sans-serif !important; 
} 
    </style> 

<nav id="mainNav"> 
      <ul class="grid_0"> 
          <li> 
         <a href="http://www.website.com">Home</a> 
         </li></ul>

來源

2012-11-19 user979331

這應該可以幫助你http://stackoverflow.com/questions/2856502/css-font-face-not-working-with- firefox-but-working-with-chrome-and-ie – Jules

找不到字體文件，例如http://www.website.com/fonts/ca/Lato-Bol-webfont.woff會產生一個HTML響應。可能你有其他的代碼服務於其他瀏覽器的魔法。 ☺ –

看來您的字體鏈接已損壞。如果我可以建議你，只需使用google web fonts。有許多字體可以用於您的網站，易於使用和免費。 Lato的字體也在那裏。

看到我在這裏演示：http://jsfiddle.net/ongisnade/Nx5VR/

下面

@font-face { 
    font-family: 'LatoBold'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Lato'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff'); 
}

的CSS規則是從谷歌字體鏈接提取的結果：

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

希望它幫助:)

來源

2012-11-20 09:13:27 Fredy

CSS font-face在Firefox中不工作

回答

相關問題