将font-weight更改为粗体是无意中改变元素的宽度

Question

在为我的网站创建导航栏的同时,我决定将活动页面选项卡以粗体显示以用于可用性目的,但是当我更改font-weight元素时它只会略微使元素变宽,我使用悬停效果制作的示例代替演示了我问题,我从来都不知道解决它的方法..

http://jsfiddle.net/amx7E/

HTML

<ul id="mainNav">
    <li class="navItem">
        <a class="navLink" id="activeLink">Link 1</a>
    </li>

    <li class="navItem">
        <a class="navLink">Link 2</a>
    </li>

    <li class="navItem">
        <a class="navLink">Link 3</a>
    </li>
</ul>

CSS

* {
    font-family: Arial;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

#mainNav {
    background: RGB(200, 230, 240);
    border-bottom: 1px solid RGB(0, 0, 0);
    height: 30px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.navItem {
    display: block;
    float: left;
    position: relative;
}

.navItem:last-child .navLink {
    border-right: 1px solid RGB(0, 0, 0);
}

.navLink {
    border-bottom: 1px solid RGB(0, 0, 0);
    border-left: 1px solid RGB(0, 0, 0);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    white-space: nowrap;
}

.navItem:hover .navLink {
    background: RGB(120, 200, 250);
    color: RGB(255, 255, 255);
    cursor: pointer;
    font-weight: bold;
}

#activeLink {
    background: RGB(90, 170, 220);
    color: RGB(255, 255, 255);
    font-weight: bold;
}

#activeLink:hover {
    background: RGB(110, 190, 240);
}

.navItem:hover .subNav {
    display: block;
}

Answer 1

除了width这里的路线还有另外两种可能性,这取决于您是否认为它们是否合适.这两个想法都在同一个原理上工作,你使用一个单独的元素来显示粗体状态,而这个元素要么不是(想法一个)要么是(想法二)用它的维度影响UI.

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>

想法二

另一个更直接,虽然它首先依赖于预先设置你的标记 - 而那些使用屏幕阅读器的人可能会不喜欢你的网站; 除非你能找到一种很好的方法来隐藏它们的重复文本.

标记:

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

在一天结束时,更好的解决方案是:

1. 设置宽度,虽然我可以理解不想这样做.
2. 使用JavaScript计算尺寸.
3. 选择一个不同的突出显示,一个不会改变文本尺寸的突出显示.

Answer 2

我处理这个问题的方法是使用JQuery来"修复"宽度,这样即使粗体确实改变,它也不会在悬停时发生变化.这基本上在这里采用css宽度答案并自动化该过程.

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

Answer 3

font-weight加粗文本的替代方法是使用text-shadow与文本颜色相同的水平阴影。此代码在左侧和右侧设置相等的阴影。只有一个阴影，文本似乎会朝着阴影的方向移动。

CSS：

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

请注意，Web 浏览器不会以相同的方式呈现文本，更不用说text-shadow效果了。在决定值之前，您需要检查它们在多个浏览器中的外观。

Answer 4

有趣的是没有人提到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;
}