quitar - CSS: negrita un texto sin cambiar el tamaño de su contenedor

tamaño de letra css

Question

Tengo un menú de navegación horizontal, que básicamente es solo <ul> con los elementos colocados uno al lado del otro. No defino el ancho, simplemente uso relleno, porque me gustaría que los anchos se definan por el ancho del elemento del menú. En negrito el artículo seleccionado actualmente.

El problema es que, en negrita, la palabra se vuelve ligeramente más ancha, lo que hace que el resto de los elementos se muevan ligeramente hacia la izquierda o hacia la derecha. ¿Hay alguna manera inteligente de evitar que esto suceda? ¿Algo en la línea de decirle al forro que ignore el ancho extra causado por el doblado? Mi primer pensamiento fue simplemente restar algunos píxeles del relleno del elemento "activo", pero esta cantidad varía.

De ser posible, me gustaría evitar establecer un ancho estático en cada entrada y luego centrarme en oposición a la solución de relleno que tengo actualmente, para poder hacer cambios futuros en las entradas de forma simple.

Answer 1

ACTUALIZACIÓN: Tuve que usar la etiqueta B para el título porque en IE11 la pseudoclase i: después no se mostró cuando tuve visibilidad: oculta.

En mi caso, quiero alinear una casilla / radio de entrada (diseñada a medida) con texto de etiqueta donde el texto se pone en negrita cuando se marca la entrada.

La solución provista aquí no funcionó para mí en Chrome. La alineación vertical de la entrada y la etiqueta se confundió con: después de la clase psuedo y los cambios no corrigieron esto.

Aquí hay una solución en la que no tienes problemas con las alineaciones verticales.

/* checkbox and radiobutton */
label
{
position: relative;
display: inline-block;
padding-left: 30px;
line-height: 28px;
}
/* reserve space of bold text so that the container-size remains the same when the label text is set to bold when checked. */
label > input + b + i
{
font-weight: bold;
font-style: normal;
visibility: hidden;
}
label > input:checked + b + i
{
visibility: visible;
}
/* set title attribute of label > b */
label > input + b:after
{
display: block;
content: attr(title);
font-weight: normal;
position: absolute;
left: 30px;
top: -2px;
visibility: visible;
}
label > input:checked + b:after
{
display: none;
}
label > input[type="radio"],
label > input[type="checkbox"]
{
position: absolute;
visibility: hidden;
left: 0px;
margin: 0px;
top: 50%;
transform: translateY(-50%);
}
label > input[type="radio"] + b,
label > input[type="checkbox"] + b
{
display: block;
position: absolute;
left: 0px;
margin: 0px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-color: #00a1a6;
border-radius: 3px;
}
label > input[type="radio"] + b
{
border-radius: 50%;
}
label > input:checked + b:before
{
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
content: '''';
border-width: 0px 3px 3px 0px;
border-style: solid;
border-color: #fff;
width: 4px;
height: 8px;
border-radius: 0px;
}
label > input[type="checkbox"]:checked + b:before
{
transform: translate(-50%, -60%) rotate(45deg);
}
label > input[type="radio"]:checked + b:before
{
border-width: 0px;
border-radius: 50%;
width: 8px;
height: 8px;
}

<label><input checked="checked" type="checkbox"/><b title="Male"></b><i>Male</i></label>
<label><input type="checkbox"/><b title="Female"></b><i>Female</i></label>

Answer 2

Descubrí que la mayoría de las fuentes tienen el mismo tamaño cuando ajusta el espacio entre letras en 1px.

a {
letter-spacing: 1px;
}
a:hover {
font-weight: bold;
letter-spacing: 0px;
}

Si bien esto cambia la fuente regular para que cada letra tenga un espaciado de píxeles adicional. Para los menús, los títulos son tan cortos que no se presenta como un problema.

Answer 3

Esto revisa y muestra ejemplos de la respuesta de Thorgeir usando Alexxali''s y mis propios ajustes:

 li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }

Esto pone pequeñas "sombras" en negro (use el nombre / código de color de su fuente en lugar de black si es necesario) en ambos lados de cada letra usando unidades que se escalarán correctamente con la representación de fuentes.

Advertencia: los valores de px admiten valores decimales, pero no se verán tan bien cuando cambie el tamaño de la fuente (p. Ej., El usuario escala la vista con Ctrl + + ). Use valores relativos en su lugar.

Esta respuesta usa fracciones de ex unidades ya que se escalan con la fuente.
En ~ la mayoría de los valores predeterminados del navegador * , se espera 1ex ≈ 8px y, por 0.025ex tanto, 0.025ex ≈ 0.1px .

Incluso puede seleccionar pesos de audacia variables con la propiedad de text-shadow más precisa que con font-weight . Ver por ti mismo:

li { color: #000; } /* set text color just in case */
.tsbold0 { text-shadow: inherit; }
.tsbold1 { text-shadow: -0.01ex 0 #000, 0.01ex 0 #000; }
.tsbold2 { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; }
.tsbold3 { text-shadow: -0.03ex 0 #000, 0.03ex 0 #000; }
.tsbold4 { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; }
.tsbold5 { text-shadow: -0.05ex 0 #000, 0.05ex 0 #000; }
.tsbold6 { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; }
.tsbold7 { text-shadow: -0.07ex 0 #000, 0.07ex 0 #000; }
.tsbold8 { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; }
.tsbold9 { text-shadow: -0.09ex 0 #000, 0.09ex 0 #000; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
.ltrsp { letter-spacing:0; font-weight:bold; } /* via Matthew Foscarini */
li.ltrsp:hover { letter-spacing:0.0125ex; }
li:hover { font-weight: normal!important; text-shadow: none!important; }

<li class="tsbold0">MmmIii123 This line tests tsbold0 (plain)</li>
<li class="tsbold1">MmmIii123 This line tests tsbold1 (0.01ex)</li>
<li class="tsbold2">MmmIii123 This line tests tsbold2 (0.02ex)</li>
<li class="tsbold3">MmmIii123 This line tests tsbold3 (0.03ex)</li>
<li class="tsbold4">MmmIii123 This line tests tsbold4 (0.04ex)</li>
<li class="tsbold5">MmmIii123 This line tests tsbold5 (0.05ex)</li>
<li class="tsbold6">MmmIii123 This line tests tsbold6 (0.06ex)</li>
<li class="tsbold7">MmmIii123 This line tests tsbold7 (0.07ex)</li>
<li class="tsbold8">MmmIii123 This line tests tsbold8 (0.08ex)</li>
<li class="tsbold9">MmmIii123 This line tests tsbold9 (0.09ex)</li>
<li class="ltrsp" >MmmIii123 This line tests ltrsp (@Matthew Foscarini)</li>
<li class="bold" >MmmIii123 This line tests bold</li>
<li class="bolder" >MmmIii123 This line tests bolder</li>
<li class="tsbold1 bold">MmmIii123 This line tests tsbold1 (0.01ex) + bold</li>
<li class="tsbold2 bold">MmmIii123 This line tests tsbold2 (0.02ex) + bold</li>
<li class="tsbold3 bold">MmmIii123 This line tests tsbold3 (0.03ex) + bold</li>
<li class="tsbold4 bold">MmmIii123 This line tests tsbold4 (0.04ex) + bold</li>
<li class="tsbold5 bold">MmmIii123 This line tests tsbold5 (0.05ex) + bold</li>
<li class="tsbold6 bold">MmmIii123 This line tests tsbold6 (0.06ex) + bold</li>
<li class="tsbold7 bold">MmmIii123 This line tests tsbold7 (0.07ex) + bold</li>
<li class="tsbold8 bold">MmmIii123 This line tests tsbold8 (0.08ex) + bold</li>
<li class="tsbold9 bold">MmmIii123 This line tests tsbold9 (0.09ex) + bold</li>

Desplácese sobre las líneas representadas para ver cómo difieren del texto estándar.

Modifique el nivel de zoom de su navegador ( Ctrl + + y Ctrl + - ) para ver cómo varían.

Answer 4

Interesante pregunta. Supongo que estás usando flotador, ¿verdad?

Bueno, no conozco ninguna técnica que pueda usar para deshacerse de esta ampliación de fuente, por lo tanto, tratarán de encajar en el ancho mínimo requerido, y el grosor variable de la fuente cambiará este valor.

La única solución que conozco para evitar este cambio es una que dijiste que no querías: establecer tamaños fijos a li''s.

Answer 5

La mejor solución de trabajo usando :: after

HTML

<li title="EXAMPLE TEXT">
EXAMPLE TEXT
</li>

CSS

li::after {
display: block;
content: attr(title);
font-weight: bold;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
}

Agrega un pseudo-elemento invisible con ancho de texto en negrita, obtenido por el atributo de title .

La solución text-shadow no parece natural en Mac y no utiliza toda la belleza que ofrece la representación de texto en Mac ... :)

http://jsfiddle.net/85LbG/

Crédito: https://.com/a/20249560/5061744

Answer 6

Lamentablemente, la única forma de evitar el cambio de ancho cuando el texto está en negrita es definir el ancho del elemento de la lista, sin embargo, como dijiste al hacerlo manualmente, lleva mucho tiempo y no es escalable.

Lo único que se me ocurre es usar algún javascript que calcule el ancho de la pestaña antes de que esté en negrita, y luego aplica el ancho al mismo tiempo que se requiere el valor en negrita (ya sea al pasar el mouse o al hacer clic).

Answer 7

Para obtener una respuesta más actualizada, puede usar -webkit-text-stroke-width :

.element {
font-weight: normal;
}
.element:hover {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

Esto evita cualquier pseudoelemento (que es una ventaja para los lectores de pantalla) y sombras de texto (que se ven desordenadas y aún puede crear un ligero efecto de ''salto'') o establecer anchos fijos (que pueden ser poco prácticos).

También le permite configurar un elemento para que sea más audaz que 1px (teóricamente, puede hacer que una fuente sea tan atrevida como desee y también podría ser un entrenamiento de mala calidad para crear una versión en negrita de una fuente que no tenga una negrita variante, como fuentes personalizadas. Aunque esto debería evitarse ya que probablemente hará que algunas fuentes aparezcan ásperas e irregulares)

Esto definitivamente funciona en los lanzamientos más recientes de Edge, Firefox, Chrome y Opera. Supongo que funciona en Safari (Opera es generalmente un buen barómetro de eso) aunque no lo he probado en Safari. NO funciona en IE11 o abajo.

También tenga en cuenta que usa el prefijo -webkit , por lo que esto no es estándar y el soporte se puede descartar en el futuro, así que no confíe en que esto es audaz, es realmente importante; es mejor evitar esta técnica a menos que sea meramente estética.

Answer 8

Puede implementar esto como el menú desplegable "Compre por departamento" de amazon.com. Utiliza amplia div. Puede crear div ancho y ocultar su parte derecha

Answer 9

Tuve el mismo problema, pero obtuve un efecto similar con un pequeño compromiso, utilicé text-shadow en su lugar.

li:hover {text-shadow:0px 0px 1px black;}

Aquí hay un ejemplo de trabajo:

body {
font-family: segoe ui;
}
ul li {
display: inline-block;
border-left: 1px solid silver;
padding: 5px
}
.textshadow :hover {
text-shadow: 0px 0px 1px black;
}
.textshadow-alt :hover {
text-shadow: 1px 0px 0px black;
}
.bold :hover {
font-weight: bold;
}

<ul class="textshadow">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>
<ul class="textshadow-alt">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>
<ul class="bold">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>font-weight: bold;</code></li>
</ul>

Ejemplo jsfiddle

Answer 10

Use JavaScript para establecer un ancho fijo del li basado en el contenido no marcado, luego agregue un estilo a la etiqueta <a> (o agregue un lapso si el <li> no tiene hijos).