1

我有一个呈现问题的 HTML 页面,其中斜体字体被似乎是下一个字母的边界框剪裁。我已经在带有 postscript 的 HP LJ5100 上对此进行了测试(我目前必须使用的唯一打印机)。这仅在从 Chrome 呈现页面时才会表现出来 - 它在 Firefox 上呈现良好。

这是一个渲染文本的示例,通过打印到文件并使用 gsview 渲染来捕获。

剪切字形示例

我的 google-fu 让我失望了。这是 chrome 的已知错误还是与页面上设置错误的字体有关?

重现代码 (HTML)

<html>
<head>
    <title>Page title</title>       
    <link rel="stylesheet" href="/CSS/RenderingTest.css" type="text/css"/>
</head>
<body>

<div id="main-content">
    <table class="specs">
      <tr>
      <td class="foo">
        <ul class="foo">
          <li class="foo">Blurb. <br><em><strong>Weight:</strong> 0.2t, <strong>price:</strong> Cr24,600.</em></li>
        </ul>
      </td>
      </tr>
    </table>
</div>

</body>
</html>

(和一个样式表)

div#main-content { 
    margin-top: 7em;
    padding-left: 1em;
    border-left: 1px solid #404040;
}

li {
    font: 90%/1.25 Tahoma, helvetica, sans-serif;
    margin-left: 1em;
    margin: 1px;
    padding: 0.5em;
    padding-left: 2em;
    padding-right: 1em;
    background-color: #E0E0E0;
    text-indent: -1em;
    list-style-type: square;
    list-style-position: inside;
}

table.specs {
    border-collapse: collapse;
    border: none;
    width: 100%;
}

td {
    font: 80%/1.25 Tahoma, helvetica, sans-serif;
    color: #404040;
    margin: 0;
    border: 0;
    padding: 0;
    padding-right: 2em;
    max-width: 40em;
    margin-top: 2em;
    margin-left: 13em;
    /*border-left: 1px solid #404040;*/
    /*margin-bottom: 2em;*/
}

td.foo {
    vertical-align: top;
    text-align: justify;
    margin: 0em;
    padding: 0em;
    margin-bottom: 0.5em;
}

ul.foo {
    list-style-type: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
}

li.foo {
    margin: 0;
    margin-left: 2.5em;
    padding: 0em;
    list-style-type: square;
    list-style-position: outside;
    text-indent: 0;
    background-color: #FFFFFF;
    margin-bottom: 0.5em;
}
4

0 回答 0