Изменение шрифта-веса на полужирный - это нежелательное изменение ширины элемента

Ответ 1

Помимо маршрута width здесь есть две другие возможности, это зависит от личных предпочтений относительно того, считаете ли вы их подходящими или нет. Обе эти идеи работают над одним и тем же принципом, что вы используете отдельный элемент для отображения жирного состояния, и этот элемент либо не имеет (идея один), либо (идея два) влияет на пользовательский интерфейс с его размерами.

http://jsfiddle.net/3Jyge/2/

Идея

Используйте псевдоселектора. Этот метод зависит от браузера, поддерживающего довольно недавние достижения, т.е. :before и content: attr(), поэтому, вероятно, пока не является надежным.

• https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility

CSS

ul {
  list-style: none;
}
ul li {
  float: left;
}
ul li:hover a {
  visibility: hidden;
}
ul li:hover:before {
  position: absolute;
  font-weight: bold;
  content: attr('data-text');
}

Разметка

<ul>
  <li data-text="one"><a href="#">one</a></li>
  <li data-text="two"><a href="#">two</a></li>
  <li data-text="three"><a href="#">three</a></li>
</ul>

Идея два

Другое немного более прямолинейное, хотя оно зависит от предварительной настройки вашей разметки first — и те, кто использует программы для чтения с экрана, могут явно не любить ваш сайт; если вы не найдете хороший способ скрыть от них дублирующийся текст.

Разметка:

<ul>
  <li><a href="#">
    <span class="a">one</span>
    <span class="b">one</span>
  </a></li>
  <li><a href="#">
    <span class="a">two</span>
    <span class="b">two</span>
  </a></li>
  <li><a href="#">
    <span class="a">three</span>
    <span class="b">three</span>
  </a></li>
</ul>

CSS

ul {
  margin: 0; padding: 0;
  list-style: none;
}
ul li {
  float: left;
}
ul li a span.b {
  visibility: hidden;
  font-weight: bold;
}
ul li a span.a {
  position: absolute;
}
ul li:hover a span.b {
  visibility: visible;
}
ul li:hover a span.a {
  visibility: hidden;
}

В конце дня лучшими решениями будут:

• Задайте ширину, хотя я понимаю, что не хочу этого делать.
• Используйте JavaScript для расчета измерений.
• Выберите другую подсветку, которая не изменяет размеры текста.

Ответ 2

То, как я обрабатываю это, - это использовать JQuery для "исправления" ширины, чтобы он не изменялся при наведении, даже если жирный шрифт меняется. Это в основном принимает ответ ширины css здесь и автоматизирует процесс.

  (function($) {
    $(function() {
      $('#menu > li').each(function(){
        wid = $(this).width();
        $(this).css('width', wid+'px');
      });
    });
  })(jQuery);

Ответ 3

Интересно, что никто не упоминает letter-spacing.

Можно добавить расстояние между буквами к нормальному шрифту и удалить его для жирной версии.

Правильное решение не всегда возможно и сильно зависит от шрифта и font-size. Но с большим количеством браузеров, начинающих принимать значения субпикселя для межстрочного интервала, он становится более практичным.

Пример:

.nav-link.active {
    font-weight: bold;

    /* Adjust for font-weight bold so that the text will still align */
    letter-spacing: -1px;
}

Ответ 4

Поскольку вы не указываете ширину элементов, они имеют размер в соответствии с их содержимым. Таким образом, когда font-weight normal, элемент занимает меньше места, чем при bold. По мере изменения размера контента размер окна также изменяется.

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

Ответ 5

Альтернативой font-weight для полужирного текста является использование text-shadow, чтобы установить горизонтальную тень того же цвета, что и текст. Этот код устанавливает равные тени влево и вправо. С одной тенью текст будет смещаться в направлении тени.

CSS

    a:hover {
      text-shadow: .25px 0px .1px,
                  -.25px 0px .1px;
    }

Обратите внимание, что веб-браузеры не отображают текст, не говоря уже о text-shadow эффектах, одинаково. Вы должны проверить, как они выглядят в нескольких браузерах, прежде чем принимать решение о значениях.

Ответ 6

Если вы поместите атрибут width в свой .navItem класс, тогда ширина не будет изменена при наведении курсора.

.navItem {
    display: block;
    float: left;
    position: relative;
    **width:70px;**  // this
}

Я обдумал скрипку. Пожалуйста, проверьте.

Ответ 7

Я думаю, что для этого нет основанного на CSS решения, если вы не можете добавить ширину, возможно, другую ширину для каждого элемента li. У вас уже есть изменения в цвете bg при наведении и выбранных состояниях, я предлагаю вам отказаться от изменения шрифта. Визуально это не большое изменение, и с точки зрения удобства использования у вас уже есть изменение цвета bg, которое, как мне кажется, достаточно.

Ответ 8

Нет. Он изменит размер родительского div.

Я хотел бы процитировать ответ Квентина.

Шрифт является пропорциональным шрифтом, поэтому он становится толще (и занимает больше горизонтальное пространство), когда он выделен жирным шрифтом.

Найти дополнительную информацию здесь.

Ответ 9

Вот как я это сделал:

<ul id="header_menu">
  <?php
  $menu_items = array(array("Home", "/"),
                      array("About", "/about.html"),
                      array("Consumer Info", "consumer-info.html"),
                      array("News & Events", "news-events.html"),
                      array("Contact", "contact.html")
                      );
  foreach($menu_items as $value)
  {
    // Find box width of text and add padding
    $padding = 10;
    $font-size = 12; // pt
    list($left,, $right) = imageftbbox($font-size, 0, "fonts/OpenSans-Bold.ttf", $value[0]);
    $width = ($right - $left) + ($padding * 2);

    echo "<li><a style=\"width:" . ($width) . "px;\" href=\"" . $value[1] . "\">" . $value[0] . "</a></li>";
  }

  ?>
</ul>