Cufon 线高问题

Question

当我在 CSS 或 javascript 中应用 line-height 时，它不会这样做。如果我在脚本中申请，我会收到以下错误。

Error: missing : after property id
Line: 26, Column: 44
Source Code:
Cufon.replace('#header .lists li a', {line-height: '120%;', font-size: '120%'}); 

javascript

$(document).ready(function() 
{

    Cufon.replace('#header .lists li a', {line-height: '120%;', font-size: '120%'});

});

style.css

#header .lists { float:left; position:relative; width:776px; height:40px; list-style:none; padding:0; margin:0; margin-top:1px; background:url(../images/bg_mainmenu_off.gif); z-index:100; }
#header .lists li {float:left; height:40px; display:inline; background:url(../images/bg_mainmenu_off.gif) repeat-x;}
#header .lists li a {display:block; width:150px; height:40px; line-height:40px; text-decoration:none; font-size:16px; font-weight:bold; text-indent:10px; font-weight:bold; color:#FFFFFF; margin: 0px; }
#header .lists li a:hover { background:url(../images/bg_mainmenu_on.gif) repeat-x; }
#header .lists div {display:none; }
#header .lists :hover div {display:block; position:absolute; background:#FFFFFF; top:26px; border:1px solid #ece7d1; padding-bottom:10px;}
#header .lists :hover div dl { float:left; width:179px; display:inline; padding:5px; margin:0 5px 10px 5px;}
#header .lists :hover div dl dt { width:179px; height:16px; background:#b39f87; margin:5px 0 10px 0; text-decoration:none; }
#header .lists :hover div dl dd {padding:0; margin:0;}
#header .lists :hover div dt a { display:block; height:14px; line-height:14px; font-size:14px; color:#FFFFFF; font-weight:bold; text-decoration:none;}
#header .lists :hover div dt a:hover { background:none;}
#header .lists :hover div dd a { display:block; height:14px; line-height:14px; font-size:14px; color:#b39f87; font-weight:normal; text-decoration:none; }
#header .lists :hover div dd a:hover {text-decoration:underline; background:none;}

Answer 1

要使 line-height 与 Cufon 一起使用，您需要将上面的内容更改为 Strict DOCTYPE

访问：http://xsdesigns.se/2012/08/not-just-seo-but-a-little-bit-of-coding-tips-as-well-cufon-fonts-and-line-height-problem-fix/

Answer 2

我已经解决了如下问题。 Cufon 在文档准备就绪时创建<cufon> 标签。 我在我的 .css 文档中定义了这样的 CSS 样式。 （我在 .HeaderArea 类中的 cufon 文本）

.HeaderArea cufon { margin-bottom:10px; }

Answer 3

对于仍在寻找答案的人。
每个单词在块元素中由 Cufon 分隔

所以试试这个：

.yourCufonDiv .cufon-canvas {margin-bottom:5px;}

Answer 4

这对我有用：

## main-content .cufon-canvas {height: 25px !important;}

Answer 5

我知道我参加 cufon 派对可能有点晚了，但我在上面阅读了一些使用保证金的解决方案。我试过这个，但就我而言，我需要一个“更紧”的线高。我尝试了一个负值，但它仍然没有工作。我发现你需要显示 cufon 生成的标签来阻止。

这是一个代码sn-p：

.myClass cufon { display: block; float: left; margin-top: -3px!important; }

这似乎是一种享受。

祝你好运。这是一个危险的世界。

Answer 6

我忍不住要提一下：

{line-height: '120%;',

您可能希望将其更改为：

{'line-height': '120%',

因为 javascript 解析器可能会在“-”运算符上中断..

Answer 7

以下 CSS 样式也适用于我，无需更改 Doctype（如 Keith 之前的帖子）

div#navigation ul li cufon {
    padding-bottom: 3px;
}

干杯

Answer 8

我们（实际上是@markedup）找到的一个解决方案是在您遇到问题的元素内的文本周围环绕一个跨度，因此：

<h1><span>Some text here that is giving you a bit of a headache</span></h1>

在子跨度和 bob 是你的母亲兄弟上添加底部填充。

使用一些额外的代码，但比指定错误的文档类型更好，这会导致潜在的无效页面和 b0rked css。

干杯。

Answer 9

有一个known bug in Cufon that will probably not be fixed 涉及非严格文档类型的页面上的片状行高识别。