CSS字体不适用于Firefox [英] CSS font-face not working in Firefox

问题描述

下面有这个字体的代码，它在谷歌浏览器中可以正常工作，但是在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'）格式（'truetype'），
 url（'http：// www。 （embedded-opentype），
 url（'http://www.website.com/fonts/ca/ Lato-Reg-webfont.woff'）格式（'woff'），
 url（'http://www.website.com/fonts/ca/Lato-Reg-webfont.svg#LatoRegular'）格式'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'）格式（'truetype'），
 url（'http：// www。 （'embedded-opentype'），
 url（'http://www.website.com/fonts/ca/ Lato-Bol-webfont.woff'）格式（'woff'），
 url（'http://www.website.com/fonts/ca/Lato-Bol-webfont.svg#LatoBold'）格式'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>主页< / a> 
< / li>< / ul> 
  

解决方案

看来您的字体链接已损坏。如果我建议您，请使用 Google网络字体。有许多字体可以用于您的网站，易于使用和免费。拉托的字体也在那里。

看我在这里演示： http://jsfiddle.net/ongisnade/Nx5VR/

下面的css规则

  @ 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）格式（' 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）格式（ 'WOFF'）; 
 
 
 
 $ b $ p $是从google字体链接中提取的结果：$ / $ p 
 
 
 < link href ='http：//fonts.googleapis.com/css？family = Lato：400,700'rel ='stylesheet'type = '文本/ CSS' > 
  
希望它的帮助：）
I have this font face code below and it works fine in google chrome, but it doesnt work at all in firefox? why?
    <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>

解决方案
It seems your font link is broken. if I may suggest you, just use google web fonts. There are many fonts that can be used for your website, easy to use and free. Lato's Font also there.

See my the demo here: http://jsfiddle.net/ongisnade/Nx5VR/

the css rules below
@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');
}
is the result of the extraction from google font link :
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
Hope its help :)

                        
这篇关于CSS字体不适用于Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！