Question

显然，谷歌的Dosis字体搞砸了表格布局：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
        <style type="text/css">
            table {
                width: 100%;
            }

            td {
                outline: 1px solid red;
            }

            #test {
                font-family: "Dosis";
            }
        </style>
    </head>
    <body>
        <table id="test">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
        <table id="control">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </body>
</html>

在上面的设置中，设置Dosis的表格中的单元格间距不均匀，而没有设置字体系列的单元格中的单元格是预期的。

令人惊讶的是，不正确的行为在Firefox，Chrome和Opera之间完全一致。

任何人都可以解释一下，并可能提供解决方案吗？

Answer 1

我认为这是因为1,2,3,4,5的宽度不一样，我为什么这么想？尝试使用相同的文字：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
        <style type="text/css">
            table {
                width: 100%;
            }

            td {
                outline: 2px solid red;
            }

            #test {
                  font-family: 'Dosis';

            }
        </style>
    </head>
    <body>
        <table id="test">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </table>
        <table id="control">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </body>
</html>

您可以使用css来固定td标签的宽度。或者使javascript动态分配宽度。

表格布局受使用中的字体影响

1 个答案: