Problema de fuente-peso de Safari, texto demasiado audaz

Cuando aplico un estilo font-weight:bold, el aspecto de la fuente es demasiado audaz en Safari en comparación con otros navegadores. Intenté debajo de css como se sugiere en algún sitio, pero sigue siendo el mismo.Problema de fuente-peso de Safari, texto demasiado audaz

text-shadow: #000000 0 0 0px;

Imágenes de renderizado de texto:

Chrome
enter image description here

Safari
enter image description here

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 reparar esto?

Fuente

2012-02-26 user1184100

Este problema sólo se observa en Safari! – user1184100

¿Recibió una solución para esto? –

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

También tenga en cuenta que la representación del texto puede ser diferente en diferentes plataformas a nivel del sistema (por ejemplo, Windows, Mac OS). Tales diferencias son correctas y típicamente no necesitan ser reparadas.

Véase también topic about -webkit-font-smoothing property.

Fuente

2012-02-26 09:10:59

Es cierto que no proporcionar una variante audaz de fuentes personalizadas obligará al navegador a generar una fuente "falsa negrita" para texto en negrita, que puede parecer un poco extraño. Pero no resolverá el problema de que Safari, de forma predeterminada, hace que todo el texto sea mucho más grueso que otros navegadores; la respuesta de Paul a continuación lo solucionará. –

@OlaTuvesson Está perfectamente bien que las páginas se representen con la representación predeterminada del sistema operativo. No es necesario e incluso perjudicial controlarlo por un desarrollador web. Además, las propiedades con prefijo del vendedor están sujetas a ser eliminadas o cambiadas en el futuro, y por lo tanto las soluciones basadas en ellas no son a prueba de futuro. –

Realmente no estoy de acuerdo; La mayoría de mis clientes están muy interesados en mantener la identidad de marca en _todas_ plataformas (en la medida de lo posible), y sí, esto incluye las fuentes y su peso. Además, la excesiva negrita en Safari tiende a dificultar la lectura del texto y, en general, se ve bastante basura. –

Uso -webkit-font-smoothing: antialiased;

El truco sombra de texto ya no funciona.

Fuente

2012-02-26 05:09:30

gracias paul! .. probado el css anterior, pero parece que no puede encontrar ninguna diferencia: | – user1184100

Esto absolutamente funciona en mi experiencia. Un millón de gracias y mil alabanzas sobre ti y tu casa. –

funcionó bien para mí (en el elemento div, no en @ font-face) – Kevin

Ninguna de las respuestas aquí funcionó para mí. Posiblemente porque estoy usando la versión de Windows de Safari para probar. Tuve que incluir la fuente en negrita en mi CSS para solucionar el problema. En el caso de la pregunta original que tendría que añadir la siguiente (nótese que utiliza el mismo nombre de la fuente familiar)

@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í.

Fuente

2014-10-22 19:55:25 nuander

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

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

Esto se puede hacer de dos maneras:

Puede incluir cualquiera de Fuentes de Google o dondequiera que su fuente es de en el encabezado; se necesita tanto el tipo de letra normal y el tipo de letra negrita cada uno debe tener un número font-weight diferente como 400 regular y 600 negrita, por ejemplo:

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

O utilizar el código fuente aboves y pegarlo en su propio CSS, como a continuación:

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

Use cualquiera que sea su fuente en lugar de XXX.

A continuación, también en fuerte {font-weight:600;}

Fuente

2017-05-03 08:23:22 Beth

Problema de fuente-peso de Safari, texto demasiado audaz

Respuesta

Cuestiones relacionadas