JQuery смещение при использовании font-face - PullRequest
Новая
       16

JQuery смещение при использовании font-face

3 голосов
/ 28 мая 2011

Я делаю простое меню, но я не знаю, почему оно неправильно выровнено вправо, когда я использую шрифты, отличные от засечек.

Конечно, это встроено в некоторые другиеИсходный код, поэтому бесполезно просто сказать мне «почему вы используете все эти вещи, чтобы просто создать список выровненных по правому краю ссылок?» 

    <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 'to' font-family ':' Arial '(или любой другой, я полагаю, шрифт), он больше не выравнивается.

Любая подсказка / исправление?

Заранее спасибо

Источник: адаптация этого урока

РЕДАКТИРОВАТЬ после первого ответа: Хорошо, я думаю, это решает проблему для 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')) формат ('trueetype'), url ('Quicksand_Light-webfont.svg # QuicksandLight') формат ('svg');Вес шрифта: нормальный;стиль шрифта: нормальный;}

А теперь добавим семейство шрифтов: 'QuicksandLight';к меню ul # больше не решает проблему.

Каким должен быть следующий шаг?В любом случае, спасибо за ваш ответ:)

1 Ответ

1 голос
/ 28 мая 2011

Вам необходимо установить желаемый шрифт до , когда вы звоните outerWidth(), чтобы получить ширину ссылки, так как изменение шрифта меняет ширину.

Вы можете сделать это, переместив эту часть вызова .css() над вызовом outerWidth(), но, вероятно, лучше вообще не менять шрифт с помощью Javascript, а просто установить нужный шрифт в своем CSS.

Проблема со шрифтами @font-face звучит так, будто браузер еще не загрузил шрифт при запуске jQuery. Попробуйте изменить код jQuery на $(window).load вместо $(document).ready, чтобы убедиться, что браузер завершил загрузку всего до запуска скрипта.

...