0

FF 不会在某些 div 上显示导入的字体或渐变和边框半径，但我真的不知道为什么。

这是网站，标题的字体应该是 Arial Rounded MT Bold，中间的 h2 渐变不显示，左右导航 div 和标题的边框半径应该是 5px，Twitter 语音气泡不正确显示。

如果有人可以与 Chrome 进行比较，那就太好了，这就是它应该看起来的样子..

这是字体的CSS：

@font-face {font-family:'Arial Rounded MT Bold';src: url("/Fonts/ArialRoundedBold.ttf") format('truetype');}
@font-face {font-family:'Arial Rounded MT Light';src: url("/Fonts/ArialRoundedLight.ttf") format('truetype');}

未显示的 H2 中间渐变：

#middle h2 {margin-bottom:5px;color:#293346;font-size:22px;padding:3px 2.3%;background:-webkit-gradient(linear, left top, left bottom, from(#EBEBEC), to(lightGrey));background: -moz-linear-gradient(top,  #EBEBEC,  #lightGrey);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EBEBEC', endColorstr='#dcdcdc');border:1px solid #d5d5d5;-webkit-border-top-right-radius: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;}

例如，“目录”的左上角导航标题应该有一个边框半径：

#left-nav .quickjump h2 {border:1px solid #4D535C;padding:2px 0;background:#676E79;color:#fff;text-shadow:0 1px 0 #5d5e80;font-size:14px;border-top-right-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;text-indent:10px;-webkit-gradient(linear, left top, left bottom, from(#808792), to(#727A86));background: -moz-linear-gradient(top,  #808792,  #727A86);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808792', endColorstr='#727A86');}

右侧导航语音气泡，其中“语音”位显示不正确：

.twtr-tweet {
    background-color: #Ffffff !important;
    border-radius: 5px;
    box-shadow: 0 0 6px #777777;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;float: left; !important;
    width:60%;}

.twtr-tweet::before {
    background-color: #Ffffff;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}
#tweet-id-1 {float: left;margin: 5px 10%;}
#tweet-id-1::before {box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );left: -9px;}
#tweet-id-2 {float: right;margin: 5px 10%;}
#tweet-id-2::before {box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );right: -9px;}
#tweet-id-3 {float: left;margin:5px 10%;}
#tweet-id-3::before {box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );left: -9px;}
#tweet-id-4 {float: right;margin: 5px 10%;}
#tweet-id-4::before {box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );right: -9px;}

很感谢任何形式的帮助..

** 我修复了问题 - 字体是错误的 URL 和边框半径：0；从 IE 抵消了 Moz 半径......

渐变在字符之间有一个额外的空间。看了好久，突然找到了。。谢谢大家的回复。

4

3 回答 3

2

叫我疯了，但是您是否尝试过将@font-face声明中的字体系列名称更改为不带引号的名称？

如果你尝试会发生什么@font-face {font-family:arial-rounded-bold;src: url("/Fonts/ArialRoundedBold.ttf") format('truetype');}

例如？

还...@font-face 的最佳实践需要四个字体文件：SVG、WOFF、EOT 和 TTF。我不确定使用哪一个 firefox，但为了跨浏览器的兼容性，我强烈建议将您的 TTF 转换为其他格式。

你可以在这里做到这一点：

http://www.fontsquirrel.com/fontface/generator

于 2012-08-25T16:18:37.653 回答
1

虽然您至少还应该为 Internet Explorer 包含一个 .EOT，但 FF 确实支持 ttf，而且您的字体语法看起来是正确的。当我在 FF 中查看该站点时，文本看起来不错。

然而，至于梯度，-moz- 写错了。

你有 -moz-linear-gradient(top, #EBEBEC, #lightGrey);并且你不能使用#lightGrey，因为那没有意义。将其#表示为十六进制代码。

它应该是这样的：

-moz-linear-gradient(top, #ebebec 0%, #cccccc 100%);

而不是你对所有边界半径使用的那种疯狂的语法，你应该使用类似......

border-radius: Apx Bpx Cpx Dpx

...其中 A 是您想要的左上角像素，B 是右上角，C 是右下角，D 是左下角。

然后不是为每个浏览器一遍又一遍地声明这些样式中的每一个......

去http://leaverou.github.com/prefixfree/获取 Lea Verou 的 prefixfree.js ，链接到你的 html 底部的脚本，然后让她的 JavaScript 为你添加前缀，这取决于你使用的浏览器访问这页纸。

于 2012-08-25T16:55:48.193 回答
0

这个错误可能是问题的一部分吗？

 vertical-align: top;float: left; !important;

应该是：

vertical-align: top;
float:left !important;

'left' 后面没有分号

于 2012-08-25T16:27:26.733 回答