使用字体时的jQuery错位

Posted 2023-03-06

技术标签:

【中文标题】使用字体时的jQuery错位【英文标题】：jQuery misalignment when using font-face 【发布时间】：2011-09-03 19:09:15 【问题描述】：

我正在制作一个简单的菜单，但我不知道为什么当我使用非衬线字体时它没有正确对齐。

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

    <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: '流沙之光'; 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-family : 'QuicksandLight';到 ul#menu 不再解决问题。

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

【问题讨论】：

【参考方案1】：

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

您可以通过将 .css() 调用的那部分移动到 outerWidth() 调用上方来做到这一点，但最好不要使用 Javascript 更改字体，只需在您的CSS。

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

【讨论】：

感谢您的回答。我现在有另一个问题，实际上我使用的是 @font-face 而不是简单的 Arial 或 Verdana 字体。查看我的编辑以获取更多详细信息

以上是关于使用字体时的jQuery错位的主要内容，如果未能解决你的问题，请参考以下文章

CentOS终端字体错位问题

jQuery-niceScroll滚动条错位问题