Cambiar el tamaño de fuente del cuerpo en función de la familia de fonts con jQuery

Estoy tratando de usar Myriad Pro como mi fuente principal con Arial y, por ejemplo, un repliegue como ese:

font: 13px "Myriad Pro", "Helvetica", "Arial", "sans-serif"; 

Quiero cambiar el tamaño de fuente cuando se seleccionan Arial o Helvetica. Esto es lo que tengo en jQuery pero no funciona:

 $(function(){ if ($("body").css("font") == "Arial") { $("body").css("font", "10px"); }; }); 

Aprecio tu tiempo, ayuda y generosidad 🙂

JavaScript no tiene una forma oficialmente compatible de detectar fonts, pero esta biblioteca es una solución decente: http://www.lalit.org/lab/javascript-css-font-detect

Usando este detector, puedes usar:

 $(function(){ var fontDetector = new Detector(); if(fontDetector.test('Arial')){ $('body').css('font-size', '10px'); } }); 

También tenga en cuenta que solo debe cambiar la propiedad de font-size . Si cambia la propiedad de la font , sobrescribirá tanto el tamaño de la fuente como las familias de fonts.

¡Todo lo que he leído en esta página hasta ahora me aterroriza! Me preocupan los tamaños de texto parpadeantes, el comportamiento extraño del navegador, la desalineación en todo el lugar debido a las condiciones de carrera con otros tamaños de elementos basados ​​en tamaños.

El problema subyacente es que las diferentes fonts tienen diferentes tamaños incluso para el mismo tamaño de punto, por lo que debe comprender cómo se comportan las diferentes fonts para ver si están dentro de las tolerancias aceptables.

se me ocurrió el siguiente probador de fonts rápido y sucio. Simplemente colóquelo en la parte superior de su página web dentro de la etiqueta y haga clic en el nombre de una fuente para cambiar a esa fuente. Pruébelo en Mac + PC + iPad y en cualquiera de los navegadores que necesite. Simplemente elimine las fonts de su lista de fonts que rompen dramáticamente su diseño.

Recuerde que si tiene partes de su página que son más críticas, intente utilizar Arial para esas secciones.

 
  • Segoe UI Medium
  • Segoe UI
  • Trebuchet MS
  • Trebuchet
  • Lucida Grande
  • Tahoma
  • Arial
  • Sans-Serif

Pruébelo en JSFiddle.com <- haga clic en los nombres rojos de las letras en el cuadro inferior derecho

una función jquery muy simple:

 function changeFont(element, fontFamily, fontSize) { var hh = $(element).height(); $(element).css("font-family", fontFamily); if ($(element).height() != hh) $(element).css("font-size", fontSize); } 

muestra:

 changeFont("body", "B Koodak, B Nazanin, Tahoma", "13pt"); 

No puede detectar qué fuente se usa para representar el texto. El estilo no cambia según las fonts disponibles.

Lo que podría hacer es medir el tamaño de un elemento que contiene texto y, a partir de ese recorte, qué fuente se puede usar para representar el texto.

(Considere también que la configuración del usuario para el tamaño de fuente también puede afectar la forma en que se representa).

Mi solución está en la línea de lo que sugiere @Guffa, pero crearía un par de cosas diferentes, tal vez incluso ocultas si eso funciona en todos los navegadores, contenedores con el mismo texto. Utilice las clases para configurar la fuente en las diferentes combinaciones, una con y otra sin Myriad Pro. Compare las alturas de estos dos contenedores. Si son iguales, sabrá que se están procesando con las fonts de respaldo. En Safari 4, obtengo 16 y 15, respectivamente.

Ejemplo:

    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus et tortor rhoncus ultricies.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus et tortor rhoncus ultricies.

El ejemplo de tvanfosson realmente funciona. Sin embargo, deberá usar el ancho en lugar de la altura para comparar las fonts. También querrás hacer que la segunda fuente de la lista de fonts sea arial (o la fuente que te apetezca usar). Después de eso simplemente compara los anchos, y si son iguales, sabrás que está usando arial en ambos casos:

   

Utilizo esto para cargar opcionalmente una hoja de estilo diferente que usará un tamaño de fuente diferente si segoe no está disponible. La razón es que la IU de Segoe es demasiado pequeña a 11 px y las otras dos fonts son demasiado grandes a 12 px. Como Segoe UI y Lucida Grande tienen una mejor legibilidad, bash usarlas primero. Al compararlos con arial, sé si están presentes en el sistema, gracias a tvanfosson.

 if($("body").css("font-family").indexOf("Arial") > -1 || $("body").css("font-family").indexOf("Helvetica") > -1) { $("body").css("font-size", "12px"); } 

Esto funciona perfectamente No sé por qué el chico que lo publicó decidió eliminarlo …

Editar: NickFitz tiene razón, ya que de hecho no funciona. Tonto, me emocioné y pasé por alto los cambios equivocados que estaba haciendo.