Les éléments en ligne passe lorsqu'il est mis en gras sur le vol stationnaire

Une solution de compromis est-à-faux gras avec text-shadow, e.g:

text-shadow: 0 0 0.01 px noir;

Pour une meilleure comparaison que j'ai créé ces exemples:

CSS:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

HTML:

<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

De passer à text-shadow vraiment faible valeur pour blur-radius fera de l'effet de brouillage pas si évident.

En général, le plus votre répéter text-shadow le plus audacieux de votre texte mais dans le même temps de perdre de la forme originale de ces lettres.

Je dois vous avertir que la définition de la blur-radius les fractions ne va pas rendre le même dans tous les navigateurs! Safari par exemple besoin de plus grandes valeurs pour la rendre de la même façon Chrome ne.

Une autre idée est d'utiliser letter-spacing

a {
  letter-spacing: 0.05px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

Vous pouvez utiliser somehting comme

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

et puis dans votre css, il suffit de régler la durée de teneur en gras et de le cacher avec visibility: hidden, de sorte qu'il conserve ses dimensions. Ensuite, vous pouvez ajuster les marges des éléments suivants pour le faire rentrer correctement.

Je ne suis pas sûr si cette approche est SEO friendly si.

CSS3 Solution Expérimentale

(Faux audace),

Pensé à partager une autre solution à laquelle personne n'a suggéré ici. Il y a une propriété appelée text-stroke qui seront utiles pour cela.

CSS:

p span:hover {
  -webkit-text-stroke: 1px black;
}

HTML:

<p>Some stuff, <span>hover this,</span> it's cool</p>

Ici, je suis ciblant le texte à l'intérieur de la span balise et nous caresser par un pixel avec black qui permettra de simuler bold de style pour le texte.

Noter que cette propriété n'est pas largement pris en charge, dès maintenant (alors que la rédaction de cette réponse), seuls Chrome et Firefox semble à l'appui de cette. Pour plus d'informations sur la prise en charge du navigateur pour text-stroke, vous pouvez vous référer à CanIUse.

---

Juste pour partager quelques trucs supplémentaires, vous pouvez utiliser -webkit-text-stroke-width: 1px; si vous n'êtes pas à la recherche pour définir un color pour votre course.

Je voudrais des conseils à l'encontre de la commutation de polices(°) sur le vol stationnaire. Dans ce cas, c'est juste les éléments de menu en déplaçant un peu, mais j'ai vu des cas où le paragraphe complet obtient reformaté en raison de l'élargissement entraîne un supplément de retour. Vous ne voulez pas voir cela se produire lorsque la seule chose que vous avez à faire est de déplacer le curseur; si vous ne faites rien de la mise en page ne doit pas changer.

Le changement peut également se produire lors de la commutation entre le mode normal et en italique. Je voudrais essayer de changer les couleurs ou d'alterner souligner si vous avez de la place en dessous du texte. (le soulignement doit rester à l'écart à partir de la bordure inférieure)

Je serais boo préfère, si j'ai utilisé la commutation des polices pour mon Formulaire de classe de Conception 🙂

(°) La police du mot est souvent utilisé à mauvais escient. "Verdana" est un police, "Verdana normal" et "Verdana bold" sont différents polices de la même police de caractères.

J'aime utiliser text-shadow à la place. Surtout que vous pouvez utiliser les transitions pour animer le texte de l'ombre.

Tous vous avez vraiment besoin est:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

Pour une navigation complète découvrez ce jsfiddle:
https://jsfiddle.net/831r3yrb/

Prise en charge du navigateur et plus d'infos sur text-shadow:
http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Quoi à ce sujet? Un javascript, CSS3 gratuit solution.

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

J'ai combiné un tas de techniques ci-dessus pour fournir quelque chose qui n'est pas totalement sucer avec js désactivé et c'est encore mieux avec un peu de jQuery. Maintenant que les navigateurs prennent en charge pour les sous-letter-spacing s'améliore, elle est vraiment agréable à utiliser.

JS:

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});

CSS:

ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

- Je utiliser text-shadow solution comme certains autres mentionnés ici:

text-shadow: 0 0 0.01px;

la différence est que je n'ai pas de spécifier la couleur de l'ombre, de sorte que cette solution est universel pour toutes les couleurs de police.

Il est préférable d'utiliser un::avant au lieu un::après comme ceci:

CSS:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

HTML:

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

Pour plus de détails: https://jsfiddle.net/r25foavy/

Je ne peux vraiment pas le supporter quand quelqu'un vous dit de ne pas faire quelque chose de cette façon quand il y a une solution simple à ce problème. Je ne suis pas sûr de li éléments, mais j'ai résolu le même problème. J'ai un menu composé de balises div.

Viens de mettre la balise div pour être "display: inline-block". En ligne, de sorte qu'ils s'assoient les uns à côté des autres et bloc que vous pouvez définir une largeur. Il suffit de régler la largeur assez large pour accueillir pour le texte en gras et le texte centre alignés.

(Note: Il semble être le décapage de mon html [ci-dessous], mais chaque élément de menu a une balise div enroulé autour d'elle avec les corrasponding ID et le nom de la classe SearchBar_Cateogory. c'est à dire: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML
(J'avais d'ancrage des balises enroulé autour de chaque élément de menu, mais je n'étais pas en mesure de les présenter en tant que nouvel utilisateur)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

CSS:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

Vous pouvez essayer les marges négatives trop si le texte en gras est plus large que la normale. (pas toujours)
Donc, l'idée est d'utiliser des classes plutôt de style le :hover état.

jQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

J'espère que je pourrais vous aider!