0

どうやら、Googleの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全体で誤った動作が完全に一貫していることです。

誰かがこれを説明して、おそらく解決策を与えることができますか？

4

1 に答える 1

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を使用して、幅を動的に割り当てます。

于 2012-12-28T02:50:25.750 に答える