css - personalizadas - ¿Cómo puedo determinar qué tipo de fuente está usando un navegador para renderizar texto?
fuentes personalizadas css (8)
Basado en el enfoque de medición de texto y el guión de Lalit Patel, he creado bookmarklets que pueden adivinar la fuente que se está utilizando para el texto seleccionado actualmente (o el body , si no se selecciona nada). ¡Parece que me funciona muy bien para averiguar qué fuente de una pila se usa! (Sin embargo, no le puede decir a qué se sans-serif realmente sans-serif ).
Agarre aquí: bookmarklets
La fuente está en GitHub .
Ver también: este CodePen , que usa principalmente el mismo código. Pruébalo seleccionando diferentes párrafos y observando la tabla / adivinar la actualización.
Mi CSS especifica " font-family: Helvetica, Arial, sans-serif; " para toda la página. Parece que Verdana se está utilizando en cambio en algunas partes. Me gustaría poder verificar esto.
Intenté copiar y pegar desde mi navegador a Word, pero no conserva la fuente.
¿Hay alguna forma de determinar qué fuente se está utilizando realmente para una sección de texto?
Firebug me dará la lista de fuentes como la anterior [1], pero no veo una forma de determinar cuál de las fuentes se está utilizando.
- Resultó que se estaba utilizando la lista incorrecta, lo que resolvió mi problema original de Verdana. Pero todavía tengo curiosidad si hay una forma de identificar la fuente de representación real.
El complemento "FontFinder" mencionado por jeremy parece no funcionar aquí, dando la primera fuente de la lista de CSS, independientemente de la fuente realmente renderizada (Firefox 4.0rc1 en Linux). Sin embargo, parece que el siguiente complemento te da la fuente "correcta".
Hoy en día, Chrome y Firefox tienen herramientas integradas para eso, pero Safari necesita que copie texto e investigue eso.
En Firefox, el Inspector de página tiene una developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… :
Esto también le indicará si las fuentes se descargaron.
Para Chrome, vaya a "Elementos" de DevTools, vaya a la pestaña "Calculado" y desplácese hasta la sección llamada "Fuentes renderizadas":
Las capturas de pantalla anteriores muestran que se pueden mostrar varias fuentes para texto Unicode. Chrome te dice que 6 glyphes ("Pekka" y el espacio) están usando "Arial", y uno ("웃") está usando "Apple SD Gothic Neo":
Arial - Archivo local (6 glifos)
Apple SD Gothic Neo - Archivo local (1 glifo)
El CSS real define:
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif
Pero esas fuentes a menudo no incluyen muchos caracteres especiales. Como la información de la fuente funciona por elemento HTML, donde el texto Unicode en un elemento podría usar varias fuentes, también muestra varias fuentes. En caso de duda, simplemente haga doble clic en el texto en el panel HTML y elimine el texto que no le interesa. Luego, cuando vuelva a seleccionar el elemento circundante, verá una sola opción. En este caso, le diría que ambos navegadores usaron "Apple SD Gothic Neo Regular" para el carácter "웃".
Desafortunadamente, diferentes navegadores (e incluso diferentes versiones de un único navegador) en la misma máquina pueden usar diferentes tipos de letra, debido a los tipos de fuentes compatibles / preferidas por un navegador. En una Mac, por ejemplo, Safari podría preferir la tecnología avanzada de Apple, mientras que Firefox es compatible con Microsoft OpenType (lo que podría generar problemas en árabe después de instalar Microsoft Office en una Mac). O para el personaje "웃" en las capturas de pantalla anteriores, Chrome y Firefox en mi Mac hoy prefieren "Apple SD Gothic Neo" (que es OpenType PostScript) pero las versiones anteriores de Firefox usaban "AppleGothic Regular" (que es una fuente TrueType) .
Para navegadores que no tienen una vista similar de fuentes, simplemente copie y pegue un fragmento del texto en algún procesador de textos o editor de texto enriquecido, seleccione un texto específico y vea qué nombre aparece en alguna lista desplegable de fuentes. En mi Mac, esto no funciona al pegar desde Firefox (donde para "웃" Firefox "Apple SD Gothic Neo" se convierte en "AppleMyungjo" al pegar), pero funciona bien para Safari y Chrome:
Para las versiones actuales de Firefox (desde v7), hay un complemento llamado "fontinfo" que informará la fuente real que se está usando (en lugar de lo que dice la propiedad de la familia de fuentes CSS), teniendo en cuenta los casos en que el navegador vuelve a una fuente diferente porque la familia de fuentes solicitada no estaba disponible o no admitía los caracteres utilizados en el texto.
Podría intentar verificar esa sección específica con Firebug para Firefox. Debería darte todas las propiedades exactas.
WhatFont es una extensión de Chrome que le indicará específicamente qué fuente de la pila de fuentes se está cargando.
Firefox 22+ le mostrará qué fuente está actualmente en uso , sin ninguna extensión.
La respuesta de Per Wilfred Hughes , Firefox ahora es compatible de forma nativa. Este artículo tiene más detalles .
Esta respuesta original hacía referencia al complemento "Font Finder", pero solo porque era de hace 4 años. El hecho de que las respuestas antiguas permanecen así y la comunidad no puede actualizarlas es una de las pocas fallas restantes de .