WordPress字体跨浏览器问题

时间:2012-10-11 06:39:19

标签: css wordpress fonts cross-browser font-face

我正在构建一个WordPress网站。我选择了菜单栏的字体。 但问题是,这个字体只显示Google Chrome&它没有在IE和Mozilla(FireFox)中显示。

请帮帮我

This is my font

#nav ul li a:hover, 
#nav .current-menu-item > a, 
#nav .current-menu-ancestor > a,
div#nav ul .current_page_item > a {
   color: #9A6614;
}

#nav > ul li, 
#nav .menu > ul li {
  padding: 8px 0;
}

#nav > ul li a,
#nav .menu > ul li a {
  padding: 0 25px 0 25px;
  font-size:17px;
  border-left: 1px solid #CFCFCF;
  font-family:"LovePotionNo10Bold" !important;
}

#nav ul li:first-child a{
  font-family:LovePotionNo10Bold !important;
  border-left: 0px;
}

以下是我的头文件声明

@font-face {
font-family: 'LovePotionNo10';src: url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_0_0.eot');
src: url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_0_0.eot?   #iefix') format('embedded-opentype'),
url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_0_0.woff') format('woff'),
url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_0_0.ttf') format('truetype');
}

@font-face {
font-family: 'LovePotionNo10Bold';
src: url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_1_0.eot');
src: url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_1_0.eot?#iefix') format('embedded-opentype'),
url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_1_0.woff') format('woff'),
url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_1_0.ttf') format('truetype');
}

@font-face {
font-family: 'LovePotionNoOrnaments';
src: url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_2_0.eot');
src: url('webfonts/22418E_2_0.eot?#iefix') format('embedded-opentype'),
url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_2_0.woff') format('woff'),
url('http://comidaslacocotte.com/wp-content/themes/maya/webfonts/22418E_2_0.ttf') format('truetype');
}

2 个答案:

答案 0 :(得分:1)

我看到你的代码中有一个拼写错误,不知道它是否能解决你的问题:

#nav ul li:first-child a{
  font-family: 'LovePotionNo10Bold' !important;
  border-left: 0px;
}

字体声明,单打或双打需要引用。

仅供参考:我建议放弃!重要规则。

答案 1 :(得分:1)

阅读这篇文章:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

对于使用@font-face的任何人来说,绝对必要的阅读。建议的语法是:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), 
       url('GraublauWeb.woff') format('woff'), 
       url('GraublauWeb.ttf') format('truetype');
}