Html 表布局受使用的字体影响_Html_Css_Fonts_Html Table

Html 表布局受使用的字体影响

html css fonts

Html 表布局受使用的字体影响,html,css,fonts,html-table,Html,Css,Fonts,Html Table,显然，谷歌的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&g

显然，谷歌的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>


试验
桌子{
宽度：100%；
}
运输署{
轮廓：1px纯红；
}
#试验{
字体系列：“Dosis”；
}
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.

在上述设置中，设置了DOSS的表格中的单元格间距不均匀，而未设置字体系列的表格中的单元格间距与预期一致

令人惊讶的是，Firefox、Chrome和Opera的错误行为完全一致

有谁能解释一下，并可能给出一个解决方案吗？

我想这是因为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>


试验
桌子{
宽度：100%；
}
运输署{
外形：2倍纯红；
}
#试验{
字体系列：“Dosis”；
}
1.
1.
1.
1.
1.
1.
2.
3.
4.
5.

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

你能描述一下发生了什么“错误行为”吗？@AndrewBarber我已经更新了这个问题。