css - poner - Problemas de renderizado de fuentes Safari
optimizar fuentes web (6)
Como puede ver a continuación, la fuente Texta-Light en Chrome aparece completamente diferente con Safari. Chrome muestra la fuente como me gusta, pero la representación de Safari en OS X e iOS parece demasiado delgada. La imagen de Safari a continuación se toma en iOS y como puede ver, por alguna razón, la fuente aparece como si hubiera dos bits de texto presente.
He buscado una solución pero no encontré nada que funcione. Intenté usar -webkit-font-smoothing: subpixel-antialiased; Pero de acuerdo con esta pregunta , el código ya no funciona.
Cromo:
Safari en iOS:
Aquí está el código para las imágenes de arriba:
h2 {
font-family: ''Texta-Light'', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
}
Hay alguna solución para esto?
Basado en la respuesta de @ lucho, utilicé el mismo enfoque, pero estoy aplicando el arreglo tan pronto como se cargue la etiqueta <body> . Esto soluciona el problema con la fuente Open Sans demasiado delgada en iOS Safari.
<body>
<script>
(function () {
var ua = navigator.userAgent
var isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari///i.test(ua) && ua.indexOf(''Chrome'') === -1
if (isIOSSafari) {
document.body.style.webkitTextStroke = ''.5px''
}
})()
</script>
ENFOQUE ALTERNATIVO:
Alternativamente, puede agregar una clase como ios-safari a la etiqueta <html> y luego aplicarle CSS normalmente:
<script>
(function () {
const ua = navigator.userAgent
const isIOSSafari = /iPhone|iPad|iPod/.test(ua) && /AppleWebKit.*Safari///i.test(ua) && !ua.includes(''Chrome'')
if (isIOSSafari) document.documentElement.classList.add(''ios-safari'')
})()
</script>
</head>
CSS:
.ios-safari {
-webkit-text-stroke: .5px;
}
Encontré una publicación que utiliza JS para ajustar la propiedad del trazo de texto . Aquí está el código real:
$(document).ready(function(){
is_chrome = navigator.userAgent.indexOf(''Chrome'') > -1;
is_explorer = navigator.userAgent.indexOf(''MSIE'') > -1;
is_firefox = navigator.userAgent.indexOf(''Firefox'') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
is_opera = navigator.userAgent.indexOf("Presto") > -1;
is_mac = (navigator.userAgent.indexOf(''Mac OS'') != -1);
is_windows = !is_mac;
if (is_chrome && is_safari){
is_safari=false;
}
if (is_safari || is_windows){
$(''body'').css(''-webkit-text-stroke'', ''0.5px'');
}
});
Puede modificar el trazo de texto de otro elemento. Espero eso ayude.
Hay una propiedad CSS, texto-rendering, que en Safari está configurado de manera predeterminada en optimizeSpeed. Lo que quieres cambiar es:
text-rendering:optimizeLegibility;
Desde https://css-tricks.com/almanac/properties/t/text-rendering/
Hay cuatro valores posibles:
• automático (predeterminado): el navegador realiza conjeturas informadas sobre cuándo optimizar la velocidad, la legibilidad y la precisión geométrica al dibujar texto. Tenga en cuenta que los diferentes navegadores interpretan este valor de manera diferente.
• optimizeSpeed: el navegador enfatiza la velocidad de reproducción sobre la legibilidad y la precisión geométrica al dibujar texto. Desactiva el kerning y las ligaduras.
• optimizeLegibility: el navegador enfatiza la legibilidad sobre la velocidad de renderizado y la precisión geométrica. Esto permite el uso de interletraje especial e información de ligadura opcional que puede estar contenida en el archivo de fuente para ciertas fuentes.
• geometricPrecision: el navegador enfatiza la precisión geométrica sobre la velocidad de renderizado y la legibilidad. Ciertos aspectos de las fuentes, como el kerning, no se escalan linealmente, por lo que geometricPrecision puede hacer que el texto con esas fuentes se vea bien. Cuando se escala la fuente SVG, el navegador calcula el tamaño del píxel y luego redondea al entero más cercano. La propiedad geometricPrecision permite una escala más fluida. Nota: Solo los navegadores WebKit aplican este valor fluido, Gecko trata el valor como optimización de la flexibilidad.
Hay una configuración adicional -webkit-font-feature-settings, de la cual una de ellas es kerning:
-webkit-font-feature-settings
h2 {
-webkit-font-feature-settings: "kern" 1;
}
Prueba esto:
html, body {
text-rendering: optimizeLegibility;
}
o si así no funciona,
html, body {
text-rendering: geometricPrecision;
}
Safari tiene un problema con las fuentes. La solución más fácil para el problema del texto duplicado es aclarar el peso de la fuente:
font-weight: 400;
Usar la solución de trazo de texto de Javascript de Lucho junto con especificar el peso de la fuente hará que su texto sea igual al de Chrome.
Si, de acuerdo con su comentario, solo está sirviendo .otf , también deberá .otf los otros tipos de archivos.
Esto podría estar causando un problema con los iOs hasta que iOs 4.2, SVG fue el único formato para usar fuentes personalizadas en el iPad o iPhone.
@font-face {
font-family: ''MyWebFont'';
src: url(''webfont.eot''); /* IE9 Compat Modes */
src: url(''webfont.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
url(''webfont.woff2'') format(''woff2''), /* Super Modern Browsers */
url(''webfont.woff'') format(''woff''), /* Pretty Modern Browsers */
url(''webfont.ttf'') format(''truetype''), /* Safari, Android, iOS */
url(''webfont.svg#svgFontName'') format(''svg''); /* Legacy iOS */
}
Una gran herramienta para usar es el generador de Webfont de Font Squirrel
Editar: También como se menciona en los comentarios, el font-weight está configurado en bold por defecto y está cargando una fuente de light .