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

ここでのルート以外にwidth2 つの可能性がありますが、それらが適しているかどうかは個人の好み次第です。これらのアイデアは両方とも、別の要素を使用して太字の状態を表示するという同じ原則に基づいて機能します。この要素は、UI のサイズに影響を与えない (アイデア 1) または影響を与える (アイデア 2) のいずれかです。

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

アイデア1

疑似セレクターを使用します。この方法は、最新の進歩をサポートしているブラウザーに依存している: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>

アイデア2

もう 1 つはもう少し簡単ですが、最初にマークアップを準備する必要があります。また、スクリーン リーダーを使用している人は、当然のことながら、あなたのサイトを嫌うかもしれません。重複したテキストをそれらから隠す良い方法を見つけられない限り。

マークアップ:

<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

font-weightテキストを太字にする代わりに、 を使用text-shadowして、テキストと同じ色の水平の影を設定します。このコードは、左右に等しい影を設定します。影が 1 つしかない場合、テキストは影の方向にずれて見えます。

CSS:

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

Web ブラウザは、効果はおろか、テキストも同じようにレンダリングしないことに注意してくださいtext-shadow。値を決定する前に、複数のブラウザーでどのように表示されるかを確認する必要があります。

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

Answer 4

要素の幅を指定していないため、コンテンツに応じてサイズが調整されます。そのため、 が である場合font-weight、normal要素は である場合よりも占有するスペースが少なくなりますbold。コンテンツのサイズが変わると、ボックスのサイズも変わります。

要素の幅を指定して、コンテンツよりもわずかに大きくするか、別の方法を使用して現在アクティブなタブを識別することができます。

Answer 5

幅属性を .navItem クラスに配置すると、ホバリング時に幅が変更されません。

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

フィドルを更新しました。チェックしてください。