使用font-face时jQuery不对齐

时间:2011-05-28 02:34:27

标签: jquery css fonts menu alignment

我正在制作一个简单的菜单,但是当我使用除了serif之外的字体时,我不知道它为什么没有正确对齐。

当然这是嵌入到其他一些源代码中的,所以告诉我“你为什么要使用所有这些东西来制作一个右对齐链接的列表?”是无用的。

    

    <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'(或我猜的任何其他字体),它就不再对齐了。

任何线索/修复?

提前致谢

资料来源:this tutorial

的改编

第一个回答后编辑: 好的,我猜它解决了Arial的问题。问题是我正在使用@ font-face:

@ font-face { font-family:'QuicksandLight'; src:url('Quicksand_Light-webfont.eot'); src:url('Quicksand_Light-webfont.eot?#iefix')格式('embedded-opentype'), url('Quicksand_Light-webfont.woff')格式('woff'), url('Quicksand_Light-webfont.ttf')格式('truetype'), url('Quicksand_Light-webfont.svg #QuicksandLight')格式('svg'); font-weight:normal; font-style:normal; }

现在,添加font-family:'QuicksandLight';到ul#menu不再解决问题了。

下一步应该是什么?无论如何,谢谢您的回答:)

1 个答案:

答案 0 :(得分:1)

您需要在调用outerWidth()之前设置所需的字体以获取链接的宽度,因为更改字体会更改宽度。

你可以通过将.css()调用的那一部分移到outerWidth()调用之上来实现这一点,但是最好不要使用Javascript更改字体,只需设置字体即可你想要的CSS。

您使用@font-face字体时遇到的问题听起来像浏览器在运行jQuery时尚未加载字体。尝试更改jQuery代码以在$(window).load而不是$(document).ready上运行,以确保浏览器在脚本运行之前已完成所有内容的加载。