jQuery misalignment when using font

 

I'm making a simple menu, but I don't know why it is not properly aligned to the right when I'm using fonts other than serif.

Of course this is embedded into some other source code, so it is useless to just tell me "why are you using all those things to just make a list of right-aligned links ?" 

    <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>

If you change 'font-family' : 'serif' to 'font-family' : 'Arial' (or any other font I guess), it is not aligned anymore.

Any clue/fix ?

Thanks in advance

Source : adaptation of this tutorial

EDIT after the first answer : Ok so I guess it solves it for Arial. The problem is that I'm using @font-face :

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

And now, adding font-family : 'QuicksandLight'; to the ul#menu doesn't fix the problem anymore.

What should be the next step ? Thanks anyway for your answer :)

You need to set your desired font before you call outerWidth() to get the width of the link, since changing the font changes the width.

You can do this by moving that part of the .css() call above the outerWidth() call, but it's probably a better idea to just not change the font with Javascript at all, and just set the font you want in your CSS.

The issue you're having with @font-face fonts sounds like the browser hasn't yet loaded the font when the jQuery gets run. Try changing your jQuery code to run on $(window).load instead of $(document).ready to make sure the browser has finished loading everything before the script runs.

链接地址: http://www.djcxy.com/p/60796.html

上一篇: 在玉石中，无法得到@font风格

下一篇: 使用字体时jQuery未对齐