css - quitar - negrilla html 5

Tema de peso de fuente de Safari, texto demasiado en negrita

Question

Cuando aplico un font-weight:bold estilo font-weight:bold , el aspecto de la fuente es demasiado audaz en Safari en comparación con otros navegadores. He intentado a continuación css como se sugiere en algún sitio, pero sigue siendo el mismo.

text-shadow: #000000 0 0 0px;

Capturas de pantalla de la representación de texto:

Cromo

Safari

Aquí está mi declaración css:

p {
margin: 8px 5px 0 15px;
color:#D8D2CE;
font-size:11pt;
letter-spacing:-1px;
font-weight: bold;
font-family: LektonRegular;
}
@font-face {
font-family: ''LektonRegular'';
src: url(''myfonts/lekton-regular-webfont.eot'');
src: url(''myfonts/lekton-regular-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''myfonts/lekton-regular-webfont.woff'') format(''woff''),
url(myfonts/lekton-regular-webfont.ttf) format(''truetype''),
url(''myfonts/lekton-regular-webfont.svg#LektonRegular'') format(''svg'');
font-weight: normal;
font-style: normal;
}

¿Cómo se puede arreglar esto?

Answer 1

He encontrado una solución para este problema en particular. En realidad, cualquiera de las soluciones anteriores no funciona para mí. Así que comencé a verificar los estilos predeterminados de webkit agregados por safari y descubrí que -webkit-text-stroke-width se aplicó a un cuerpo con un valor de 0.5 px . Lo puse a 0! Importante y resolví el problema para mí.

Answer 2

Las soluciones de -webkit no funcionarán para el problema fuerte de muchas fuentes de Google, fuentes personalizadas y fuentes que no tienen valores preestablecidos.

El problema es que necesita especificar el valor de negrita en las etiquetas fuertes.

Esto se puede hacer de dos maneras:

Puede incluir desde Google Fonts o desde donde se encuentre su fuente en su encabezado; necesita tanto la fuente normal como la fuente en negrita, cada una debe tener un número de fuente diferente como 400 regular y 600 negrita, por ejemplo:

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

O usa el código fuente anterior y pégalo en tu propio css como se muestra a continuación:

@font-face {
font-family: ''XXX'';
font-style: normal;
font-weight: 600;
src: local(''XXX SemiBold''), local(''XXX-SemiBold''),
url...
}

Usa lo que sea tu fuente en lugar de XXX.

Entonces también en fuerte {font-weight:600;}

Answer 3

Ninguna de las respuestas aquí funcionó para mí. Posiblemente porque estoy usando la versión de Windows de Safari para la prueba. Tuve que incluir la fuente en negrita en mi CSS para solucionar el problema. En el caso de la pregunta original, tendría que agregar lo siguiente (observe que usa el mismo nombre de familia de fuente)

@font-face {
font-family: ''LektonRegular'';
src: url(''myfonts/lekton-bold-webfont.eot'');
src: url(''myfonts/lekton-bold-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''myfonts/lekton-bold-webfont.woff'') format(''woff''),
url(myfonts/lekton-bold-webfont.ttf) format(''truetype''),
url(''myfonts/lekton-bold-webfont.svg#LektonRegular'') format(''svg'');
font-weight: bold;
font-style: normal;
}

Esto funcionó en todos los navegadores para mí.

Answer 4

Para representar texto en negrita de manera consistente en todos los navegadores, su fuente debe contener explícitamente caracteres en negrita. De lo contrario, es probable que los navegadores intenten hacer variantes en negrita de los caracteres en función de sus variantes normales, y los resultados son inconsistentes en todos los navegadores, ya que probablemente tengan diferentes algoritmos para dicha conversión.

También tenga en cuenta que la representación del texto puede ser diferente en diferentes plataformas en el nivel del sistema (por ejemplo, Windows, Mac OS). Tales diferencias están bien y normalmente no necesitan ser arregladas.

Véase también el tema sobre la propiedad -webkit-font-smoothing .

Answer 5

Utilice -webkit-font-smoothing: antialiased;

El truco de la sombra de texto ya no funciona.