¿Es posible crear un CSS específico de Mac OS para arreglar la diferencia de fuentes?

Question

Estoy trabajando en un proyecto con un diseñador e insistió en utilizar una fuente específica para los títulos y varios elementos de la página. Así que estamos usando un kit de fuentes para incrustar con @ font-face.

Funciona perfectamente en PC (Firefox, IE 7 y 8, Chrome, Safari) pero en Mac OS (Safari y Firefox) las fuentes no están alineadas verticalmente de la misma manera. Después de buscar en la Web, no encontré ninguna solución para esto, excepto que "siempre ha habido diferencias entre los navegadores y las plataformas, convivir con ella".

Sé que las fuentes nunca se renderizan exactamente igual en todas las plataformas, pero esta vez no es algo así como la fuente se ve más negrita o algo así. La fuente parece que su línea base es completamente diferente entre Windows y Mac OS X. En Mac OS, la fuente, a un tamaño de 16px, es 3px más alta que en la PC.

Así que estoy buscando una solución de copia de seguridad: ¿hay alguna manera de crear un CSS específicamente para usuarios de Mac OS? No quiero apuntar solo a Safari porque Safari PC está bien, y Firefox Mac no está bien.

O si tiene una solución para arreglar la diferencia de línea de base que no requiere un archivo CSS específico, me gustaría escucharla.

Gracias!

Answer 1

Si configurar una línea de altura explícita no soluciona el problema, puede servir diferentes hojas de estilo para cada navegador utilizando su servidor y detectar el sistema operativo en su aplicación (a través del agente de usuario). También puede hacer algo en JS haciendo lo mismo, pero es probable que haya un FOUC mientras que JS carga los estilos relevantes.

Answer 2

Me temo que el navegador/os sniffing es su única opción. CSS en sí no tiene conocimiento de sistema operativo ni he oído hablar de un css hack específicamente dirigido a osx.

Esta es la forma más fácil para mí de detectar OSX y agregar la clase OSX al cuerpo del documento para que pueda anular específicamente los estilos CSS para OSX.

if(navigator.platform.match('Mac') !== null) { 
    document.body.setAttribute('class', 'OSX'); 
} 

Answer 3

Hay una manera más fácil. http://rafael.adm.br/css_browser_selector/

Detecta el navegador y el sistema operativo y le permite especificar clases específicas para él.

Answer 4

Si quiere algo perfecto e indolora, tendrá que usar las fuentes comunes o las fuentes de un servicio en línea como la biblioteca de fuentes gratuitas de Google o una de las bibliotecas de fuentes de pago. Estas fuentes han sido diseñadas y probadas para trabajar en la web.

Experimentar e incluir fuentes para que el navegador del usuario se descargue y trate de mostrar correctamente está bien, pero no será perfecto y no será sencillo. Además, tenga mucho cuidado con las restricciones de licencia: asegúrese de que las fuentes que su diseñador desea utilizar estén debidamente autorizadas para su uso en el sitio web del cliente.

Si tiene que olfatear el navegador y servir varias hojas de estilo, en este punto diría que su diseño está roto y necesita ser revisado. Muestre https://fonts.google.com a su diseñador y vea si le gusta cualquiera de ellos: funcionan multiplataforma en todos los navegadores modernos y algunos son muy hábiles. EDITAR: Ah, y son de uso gratuito sin preocupaciones de licencias.