Elementos inline mudando quando destacados em negrito ao passar o mouse

204

Criei um menu horizontal usando listas HTML e CSS. Tudo funciona como deveria, exceto quando você passa o mouse sobre os links. Veja bem, eu criei um estado de foco em negrito para os links, e agora os links do menu mudam devido à diferença de tamanho em negrito.

Encontro o mesmo problema que esta postagem do SitePoint . No entanto, a postagem não possui solução adequada. Procurei em toda parte por uma solução e não consigo encontrar uma. Certamente não posso ser o único a tentar fazer isso.

Alguém tem alguma idéia?

PS: Não sei a largura do texto nos itens de menu, por isso não posso apenas definir a largura dos itens de li.

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }
<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

Billy
fonte

Respostas:

390

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Veja o exemplo de trabalho no JSfiddle . A idéia é reservar espaço para :hoverconteúdo em negrito (ou qualquer estilo de estado) no :beforepseudo elemento e usar a tag title como fonte do conteúdo.

350D
fonte
20
Perfeito! Funciona para o <a> mesmo sem usar um ul, eu usaria outro atributo como texto de dados em vez de título.
brittongr
6
Esta solução funciona, mas é melhor quando você adiciona margin-top: -1pxa :afterpara evitar a criação de espaço de 1px de altura.
micropro.cz
4
@ mattroberts33 :vs ::"Todos os navegadores que suportam a ::sintaxe CSS3 de dois pontos também suportam apenas a :sintaxe, mas o IE 8 suporta apenas os dois pontos; por enquanto, é recomendável usar apenas os dois pontos para melhor suporte ao navegador." css-tricks.com/almanac/selectors/a/after-and-before
gfullam
1
@HughHughTeotl Utilização da fonte de tamanho: 0 para ULou a::after, em outras palavras - reinicializar todos os / marging / linha-alturas de preenchimento / font-tamanhos etc
350D
1
Infelizmente, você sempre tem a dica de ferramenta exibida :-(
Benedikt
42

Uma solução comprometida é fingir negrito com sombra de texto, por exemplo:

sombra do texto: 0 0 0,01 px preto;

Para uma melhor comparação, criei estes exemplos:

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

Passar para text-shadowum valor realmente baixo blur-radiusfará com que o efeito de desfoque não seja tão aparente.

Em geral, quanto mais repetir, text-shadowmais ousado será o texto, mas ao mesmo tempo perderá a forma original das letras.

Devo avisar que definir as blur-radiusfrações para não renderiza o mesmo em todos os navegadores! O Safari, por exemplo, precisa de valores maiores para renderizá-lo da mesma maneira que o Chrome fará.

Stefan J
fonte
6
Isto é ainda mais feio do que outro navegador calculado soluções ousadas e deve ser evitado
Zach Saucier
28

Se você não pode definir a largura, isso significa que a largura será alterada à medida que o texto estiver em negrito. Não há como evitar isso, exceto por compromissos como a modificação do preenchimento / margens de cada estado.

Andrew Vit
fonte
2
+1 como Andrew diz, o texto em negrito é mais amplo. Facto da vida. Mesmo fixe a largura dos itens de menu para evitar isso ou conviva com ele (o recálculo do preenchimento é impreciso e propenso a erros).
Cletus
Sim, costumo evitar o efeito negrito do mouse por esse motivo.
Steve Wortham
"Não há como evitar isso". Veja a resposta da 350D abaixo.
Gfullam
Observe também que a resposta de Andrew foi publicada 4 anos antes da adição da solução de 350D. Pseudo-elementos com attr () funcionam como valor do conteúdo absolutamente não era possível naquela época :) oh, o tempo voa no Stack Overflow. No entanto, a comunidade supera isso e tem a resposta aceita e a maioria dos votos positivos, então estou feliz!
Justus Romijn
25

Outra ideia é usar letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

John Magnolia
fonte
Isso funciona com todos os navegadores, especialmente o IE10 + e o Safari?
Umair Hafeez
o meu favorito :)
Inc33
1
@UmairHafeez sim, todos os navegadores modernos esperam opera mini caniuse.com/#feat=css-letter-spacing
John Magnolia
1
Como você sabia que 0.235px era a quantidade perfeita? Existe alguma fórmula para calcular qual espaçamento é necessário?
Cold_Class
Não, eu acho que foi apenas tentativa e erro rápidos
John Magnolia
17

Uma linha no jquery:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

editar: Embora isso possa trazer a solução, é preciso mencionar que ela não funciona em conjunto com o código da postagem original. "display: inline" deve ser substituído por parâmetros flutuantes para que uma configuração de largura seja eficaz e que o menu horizontal funcione conforme o esperado.

Alex
fonte
Você pode fazer isso para todos os links da página? Ou seja, substituir ul.nav li apor aobras?
gnzlbg
2
Esta questão não foi marcada com JS, muito menos com jQuery. Por favor, não poste soluções desnecessárias.
Zach Saucier
2
@Zach Saucier Em algumas situações, alguns desenvolvedores podem preferir uma solução JS, pois geralmente são mais curtos. Em vez de fazer voto negativo a todos que postaram algo com JS, você pode adicionar a tag JS à pergunta e permitir que cada pessoa decida qual solução considera mais útil.
Lurkit 4/03/16
1
@Zach Saucier A solução CSS pode não ser prática em algumas situações. Às vezes, você pode precisar ter um atributo de título diferente ou já ter usado o pseudo-elemento :: after, ou pode considerar pessoalmente mais prático em uma determinada situação usar um liner único em JS para várias linhas de CSS. Considero que a resposta CSS é superior na maioria dos casos, mas é útil ter as respostas JS como opções adicionais.
Lurkit 7/03/16
Esta é a única solução que pude encontrar que resolve o problema, mantendo um espaçamento uniforme entre os elementos.
Jaiden Mispy
11

Solução CSS3 - Experimental

(Ousadia falsa)

Pensou em compartilhar uma solução diferente que ninguém sugeriu aqui. Existe uma propriedade chamada text-strokeque será útil para isso.

p span:hover {
  -webkit-text-stroke: 1px black;
}
<p>Some stuff, <span>hover this,</span> it's cool</p>

Aqui, estou direcionando o texto para dentro da spantag e traçamos um pixel com o blackqual simularemos o boldestilo para esse texto em particular.

Observe que essa propriedade não é amplamente suportada. No momento (ao escrever esta resposta), apenas o Chrome e o Firefox parecem oferecer suporte. Para obter mais informações sobre o suporte ao navegador text-stroke, consulte CanIUse .


Apenas para compartilhar algumas coisas extras, você pode usar -webkit-text-stroke-width: 1px;se não quiser definir um colorpara o seu AVC.

Mr. Alien
fonte
Isso é incrível
Alan Fitzpatrick
Ótima dica. Infelizmente, ainda não é padrão após 4 anos.
Dávid Veszelovszki
5

Você poderia usar algo como

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

e, em seu css, defina o conteúdo da extensão em negrito e oculte-o com visibilidade: hidden, para que ele mantenha suas dimensões. Em seguida, você pode ajustar as margens dos seguintes elementos para ajustá-lo corretamente.

Não tenho certeza se essa abordagem é amigável para SEO.

monge
fonte
1
Isto também não é desenvolvedor / manutenção amigável
Zach Saucier
5

Acabei de resolver o problema com a solução "sombra". Parece o mais simples e eficaz.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

Não há necessidade de repetir a sombra três vezes (o resultado foi o mesmo para mim).

Daniele B
fonte
Isto é ainda mais feio do que outro navegador calculado soluções ousadas e deve ser evitado
Zach Saucier
4

Eu tive um problema semelhante ao seu. Eu queria que meus links ficassem em negrito quando você passasse o mouse sobre eles, mas não apenas no menu, mas também no texto. Como você pode imaginar, seria uma tarefa real descobrir todas as larguras diferentes. A solução é bem simples:

Crie uma caixa que contenha o texto do link em negrito, mas colorido como plano de fundo e com o link real acima dele. Aqui está um exemplo da minha página:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

Claro que você precisa substituir # FFFFE0 pela cor de fundo da sua página. Os índices-z não parecem ser necessários, mas eu os coloco de qualquer maneira (como o elemento "hipo" ocorrerá após o elemento "hiper" no código HTML). Agora, para colocar um link em sua página, inclua o seguinte:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

O segundo "aqui" ficará invisível e oculto abaixo do seu link. Como esta é uma caixa estática com o texto do link em negrito, o restante do texto não será mais alterado, pois já foi alterado antes de você passar o mouse sobre o link.

Espero ter conseguido ajudar :).

Tanto tempo


fonte
2

Você pode trabalhar com a propriedade "margin":

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

Apenas verifique se as margens esquerda e direita são grandes o suficiente para que o espaço extra possa conter o texto em negrito. Para palavras longas, você pode escolher margens diferentes. É apenas mais uma solução alternativa, mas fazer o trabalho para mim.

Martin Horvath
fonte
Eu usei uma solução semelhante, mas para mim - apenas adicionando 'margin: 0 -2px' ao estilo hover (e não adicionando mais nada ao estilo normal) - funcionou muito bem.
Yuval A.
8
Isso não funciona se houver alguma variabilidade no comprimento da sua string
kat
2

Eu gosto de usar sombra de texto. Especialmente porque você pode usar transições para animar sombra de texto.

Tudo o que você realmente precisa é:

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

Para uma navegação completa, confira este jsfiddle: https://jsfiddle.net/831r3yrb/

Suporte ao navegador e mais informações sobre sombra de texto: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Alma Relâmpago
fonte
Isso funciona bem com o uso de transições. Ótima solução alternativa.
Yazmin
1

Eu aconselho a não trocar as fontes (°) ao passar o mouse. Nesse caso, são apenas os itens de menu que estão se movendo um pouco, mas já vi casos em que o parágrafo completo é reformatado porque o alargamento causa uma quebra de linha extra. Você não quer ver isso acontecer quando a única coisa que você faz é mover o cursor; se você não fizer nada, o layout da página não deve mudar.

A mudança também pode acontecer ao alternar entre normal e itálico. Eu tentaria alterar as cores ou alternar o sublinhado se você tiver espaço abaixo do texto. (o sublinhado deve ficar afastado da borda inferior)

Eu seria boo'd se eu usasse alternar fontes para a minha classe Design de Formulário :-)

(°) A palavra fonte é frequentemente usada incorretamente. "Verdana" é um tipo de letra , "Verdana normal" e "Verdana negrito" são fontes diferentes do mesmo tipo de letra.

stevenvh
fonte
1

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}
<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

Qwertiy
fonte
1

Eu uso a solução de sombra de texto como alguns outros mencionados aqui:

text-shadow: 0 0 0.01px;

a diferença é que eu não especifico a cor da sombra, portanto, esta solução é universal para todas as cores de fonte.

michal.jakubeczy
fonte
1

Uma abordagem alternativa seria "emular" texto em negrito via sombra de texto. Isso tem o bônus (/ malus, dependendo do seu caso) para funcionar também nos ícones de fontes.

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

Meio hacky, embora você evite a duplicação de texto (o que é útil se for muito, como no meu caso).

EdoardoSchnell
fonte
0

Esta é a solução que eu prefiro. Requer um pouco de JS, mas você não precisa que sua propriedade title seja exatamente a mesma e seu CSS pode permanecer muito simples.

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});
li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

lurkit
fonte
0

Que tal isso? Uma solução livre de javascript - CSS3.

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>
user10099
fonte
1
Este é um monte de marcação extra e CSS para corrigir o problema ... Não é desenvolvedor, SEO, ou futuro amigável
Zach Saucier
0

Solução não muito elegante, mas "funciona":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
Świeżu
fonte
0

Combinei várias técnicas acima para fornecer algo que não é totalmente ruim com o js desativado e é ainda melhor com um pouco do jQuery. Agora que o suporte ao navegador para espaçamento entre letras de subpixel está melhorando, é muito bom usá-lo.

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

squarecandy
fonte
0

É melhor usar a :: before em vez de :: :: assim:

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

Para mais detalhes: https://jsfiddle.net/r25foavy/

clisima
fonte
Você pode fornecer uma justificativa para por a::beforeque seria melhor do que a::after? Isso parece ser uma peça-chave da sua resposta, mas não é óbvio por que uma é preferível à outra nesse caso.
nirvdrum 10/01
0

Eu fixei menu quando pairar sucesso ousado. Suporta responsivo, este é o meu código:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);
Ty Phan
fonte
-1

Se você não tem aversão ao uso do Javascript, pode definir a largura adequada assim que a página for mostrada. Aqui está como eu fiz (usando o Prototype):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}
Alex Grin
fonte
Javascript não foi marcado na pergunta, muito menos jQuery. Por favor, responda continuar usando as línguas marcado na questão
Zach Saucier
-1

Eu realmente não suporto quando alguém diz para você não fazer algo dessa maneira quando há uma solução simples para o problema. Não tenho certeza sobre os elementos li, mas acabei de corrigir o mesmo problema. Eu tenho um menu que consiste em tags div.

Basta definir a tag div como "display: inline-block". Inline para que eles fiquem próximos um do outro e bloqueie para que você possa definir uma largura. Basta definir a largura suficiente para acomodar o texto em negrito e alinhar o centro do texto.

(Nota: parece estar retirando meu html [abaixo], mas cada item de menu tinha uma tag div envolvida com o ID correspondente e o nome da classe SearchBar_Cateogory. <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (eu tinha tags âncora em volta de cada item de menu, mas não consegui enviá-las como um novo usuário)

<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;
}
Jørn Schou-Rode
fonte
1
Isso está usando uma largura fixa, assim como o OP especificado NÃO é o caso. Como tal, esta resposta não responde à pergunta que está sendo feita
Zach Saucier
-1

tente isto:

.nav {
  font-family: monospace;
}
Yukulélé
fonte
Como isso mudaria alguma coisa?
Leonheess 06/02/19
@ MiXT4PE Com monoespaço, os caracteres têm o mesmo tamanho em regular ou em negrito. tamanho não muda
Yukulélé 10/02/19
mudando uma família de fontes por causa disso não é uma solução
Funkysoul
Alterar a família de fontes para corrigir um erro na interface do usuário não é uma solução, pois a família de fontes é a raiz de toda tipografia da marca na maioria das vezes.
Umair Hafeez
A tipografia é uma grande parte do design da interface do usuário e os tipos de letra projetados para uma marca devem levar em consideração seu uso nas interfaces do usuário. PT Sans e Clear Sans são dois tipos de letra cujo espaçamento de glifo é semelhante entre pesos. Infelizmente, é verdade que muito poucos tipos de letra (não monoespaçados) possuem essa propriedade e provavelmente é mais barato implementar uma das outras respostas à pergunta do que pagar pelo desenvolvimento do tipo de letra. No entanto, isso mudará conforme a disponibilidade da fonte variável melhorar. Consulte v-fonts.com para obter fontes com largura variável + pesos.
Peter W
-3

Você também pode tentar as margens negativas se o texto em negrito for maior que o normal. (nem sempre) Portanto, a idéia é usar classes para estilizar o estado: hover.

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

Espero poder ajudar!

Robert Bokori
fonte
1
Por favor, não poste respostas em idiomas diferentes dos marcados. Isso não responde à questão que se coloca
Zach Saucier