使用字体时，jQuery不对齐

如何解决使用字体时，jQuery不对齐

| 我正在制作一个简单的菜单，但是我不知道为什么我在使用衬线以外的字体时，它没有正确地对齐到右侧。当然，这是嵌入到其他一些源代码中的，因此仅告诉我“您为什么要使用所有这些内容来仅列出右对齐链接？”是没有用的。

    <style type=\"text/css\">
        html,body {
            overflow-x:visible;
        }
        body {
            margin:0;
            padding:0;
            background:#111;
        }
        ul#menu {
            margin-top: 30px;
            padding: 0px;
            list-style: none;
            font-size: 1.1em;
            clear: both;
            float: right;
            width: 150px;
            padding-right:20px;
        }
        ul#menu li {
            margin: 0;
            padding: 0;
            overflow: hidden;
            float: right;
            height:40px;
        }
        ul#menu a,ul#menu span {
            padding: 10px 20px;
            float: left;
            text-decoration: none;
            text-transform: none;
            clear:none;
            position:relative;
            height: 20px;
            line-height: 20px;
        }
        ul#menu a {
            padding-right:20px;
            border-bottom:0;
            margin-right:-300px;
            color: #a40800;
        }
        ul#menu span {
            display:block;
        }

    </style>
    <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js\"></script>
    <script type=\"text/javascript\">
        $(document).ready( function() {
            $(\"#menu li\").prepend(\"<span></span>\"); //Throws an empty span tag right before the a tag

            $(\"#menu li\").each( function() { //For each list item...
                var linkText = $(this).find(\"a\").html(); //Find the text inside of the a tag
                $(this).find(\"span\").show().html(linkText); //Add the text in the span tag
                var width = $(this).find(\"a\").outerWidth();//Find the width of the link
                $(this).find(\"span,a\").css({
                    \'left\' : \'-\'+width+\'px\',\'color\' : \'#a0c0f0\',\'font-family\' : \'serif\'
                });
            }
            );
        });
    </script>
</head>
<body>
    <ul id=\"menu\">
        <li>
            <a href=\"#item1\">asdqwe</a>
        </li>
        <li>
            <a href=\"#item2\">asdqaesd</a>
        </li>
        <li>
            <a href=\"#item3\">xcvsd</a>
        </li>
        <li>
            <a href=\"#item4\">qweasd</a>
        </li>
        <li>
            <a href=\"#item5\">ddfgdfgrwe</a>
        </li>
</body>

如果将\'font-family \'：\'serif \'更改为\'font-family \'：\'Arial \'（或者我猜是其他字体），它将不再对齐。任何线索/修复？提前致谢资料来源：本教程改编在第一个答案之后进行编辑：好的，我想它可以解决Arial问题。问题是我正在使用@ font-face： @ font-face { 字体家族：\'QuicksandLight \'; src：url（\'Quicksand_Light-webfont.eot \'）; src：url（\'Quicksand_Light-webfont.eot？#iefix \'）format（\'embedded-opentype \'）， url（\'Quicksand_Light-webfont.woff \'）格式（\'woff \'）， url（\'Quicksand_Light-webfont.ttf \'）格式（\'truetype \'）， url（\'Quicksand_Light-webfont.svg＃QuicksandLight \'）格式（\'svg \'）; font-weight：正常；字体样式：正常； } 现在，添加font-family：\'QuicksandLight \'; ul＃menu不再解决此问题。下一步应该怎么做？无论如何，谢谢您的回答:)

解决方法

您需要在调用font1ѭ之前设置所需的字体，以获取链接的宽度，因为更改字体会更改宽度。您可以通过将.css()调用的那一部分移到outerWidth()调用之上来进行此操作，但是最好不要使用Javascript完全更改字体，而只需在CSS中设置所需的字体，这可能是一个更好的主意。 @font-face字体遇到的问题听起来像是在运行jQuery时浏览器尚未加载字体。尝试将jQuery代码更改为在$(window).load而不是$(document).ready上运行，以确保浏览器在脚本运行之前已完成所有加载。