¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web? -- javascript campo con html campo con css campo con fonts camp Relacionados El problema

How to detect which one of the defined font was used in a web page?


142
vote

problema

Español

Supongamos que tengo la siguiente regla de CSS en mi página:

  body {     font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; }   

¿Cómo podría detectar cuál de las fuentes definidas se utilizaron en el navegador del usuario?

Para las personas que se preguntan por qué quiero hacer esto es porque la fuente que estoy detectando contiene glifos que no son disponibles en otras fuentes. Si el usuario lo hace no tiene la fuente, entonces quiero que muestre un enlace, pidiéndole al usuario que descargue esa fuente (para que puedan usar mi aplicación web con la fuente correcta).

Actualmente, estoy mostrando el enlace de fuente de descarga para todos los usuarios. Solo quiero mostrar esto para las personas que lo hacen no tienen la fuente correcta instalada.

Original en ingles

Suppose I have the following CSS rule in my page:

body {     font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } 

How could I detect which one of the defined fonts were used in the user's browser?

For people wondering why I want to do this is because the font I'm detecting contains glyphs that are not available in other fonts. If the user does not have the font, then I want it to display a link asking the user to download that font (so they can use my web application with the correct font).

Currently, I am displaying the download font link for all users. I want to only display this for people who do not have the correct font installed.

</div
           
   
   

Lista de respuestas

75
 
vote
vote
La mejor respuesta
 

Lo he visto hecho en una forma de IFFY, pero bastante confiable. Básicamente, un elemento se establece para usar una fuente específica y una cadena se establece en ese elemento. Si no existe la fuente establecida para el elemento, toma la fuente del elemento padre. Entonces, lo que hacen es medir el ancho de la cadena renderizada. Si coincide con lo que esperaban para la fuente deseada, en lugar de la fuente derivada, está presente. Esto no funcionará para las fuentes monoespacientes.

Aquí es donde vino de: Detector de fuentes JavaScript / CSS (Ajaxian.com; 12 mar 2007)

 

I've seen it done in a kind of iffy, but pretty reliable way. Basically, an element is set to use a specific font and a string is set to that element. If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present. This won't work for monospaced fonts.

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

</div
 
 
 
 
33
 
vote

Escribí una herramienta simple de JavaScript que puede usarla para verificar si se instala una fuente o no.
Utiliza una técnica simple y debe ser correcta la mayor parte del tiempo.

jfont checker en github

 

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

</div
 
 
       
       
10
 
vote

@pat En realidad, Safari no le da la fuente utilizada, Safari en su lugar siempre devuelve la primera fuente en la pila independientemente de si está instalada, al menos en mi experiencia.

  font-family: "my fake font", helvetica, san-serif;   

Suponiendo que Helvetica es la instalada / usada, obtendrá:

  • "Mi fuente falsa" en Safari (y creo que otros navegadores webkit).
  • "Mi fuente falsa, Helvetica, San-Serif" en los navegadores Gecko e IE.
  • "Helvetica" en Opera 9, aunque leí que están cambiando esto en la ópera 10 para que coincida Gecko.

Tomé un pase en este problema y creé fuente desapack , que prueba cada una Fuente en una pila y devuelve la primera instalada única. Utiliza el truco que menciona @mojofilter, pero solo devuelve el primero si se instalan múltiples. Aunque sufre de la debilidad que menciona @tlrobinson (Windows sustituirá a Arial para Helvetica en silencio e informará que Helvetica está instalada), de lo contrario funciona bien.

 

@pat Actually, Safari does not give the font used, Safari instead always returns the first font in the stack regardless of whether it is installed, at least in my experience.

font-family: "my fake font", helvetica, san-serif; 

Assuming Helvetica is the one installed/used, you'll get:

  • "my fake font" in Safari (and I believe other webkit browsers).
  • "my fake font, helvetica, san-serif" in Gecko browsers and IE.
  • "helvetica" in Opera 9, though I read that they are changing this in Opera 10 to match Gecko.

I took a pass at this problem and created Font Unstack, which tests each font in a stack and returns the first installed one only. It uses the trick that @MojoFilter mentions, but only returns the first one if multiple are installed. Though it does suffer from the weakness that @tlrobinson mentions (Windows will substitute Arial for Helvetica silently and report that Helvetica is installed), it otherwise works well.

</div
 
 
9
 
vote

Una técnica que funciona es mirar el estilo computado del elemento. Esto se apoya en Opera y Firefox (y reconozco a Safari, pero no se ha probado). IE (7 al menos), proporciona un método para obtener un estilo, pero parece ser lo que estaba en la hoja de estilos, no el estilo computado. Más detalles sobre Quirksmode: Obtener estilos

Aquí hay una función simple para agarrar la fuente utilizada en un elemento:

  /**  * Get the font used for a given element  * @argument {HTMLElement} the element to check font for  * @returns {string} The name of the used font or null if font could not be detected  */ function getFontForElement(ele) {     if (ele.currentStyle) { // sort of, but not really, works in IE         return ele.currentStyle["fontFamily"];     } else if (document.defaultView) { // works in Opera and FF         return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");     } else {         return null;     } }   

Si la regla de CSS para esto fue:

  #fonttester {     font-family: sans-serif, arial, helvetica; }   

Luego, debe devolver a Helvetica si se instala, si no, Arial, y, por último, el nombre de la fuente SANIF predeterminada del sistema. Tenga en cuenta que el orden de las fuentes en su declaración de CSS es significativa.

Un hack interesante que también podría intentarlo es crear muchos elementos ocultos con muchas fuentes diferentes para tratar de detectar qué fuentes están instaladas en una máquina. Estoy seguro de que alguien podría hacer una página de estadísticas de fuentas ingeniosas con esta técnica.

 

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get Styles

Here's a simple function to grab the font used in an element:

/**  * Get the font used for a given element  * @argument {HTMLElement} the element to check font for  * @returns {string} The name of the used font or null if font could not be detected  */ function getFontForElement(ele) {     if (ele.currentStyle) { // sort of, but not really, works in IE         return ele.currentStyle["fontFamily"];     } else if (document.defaultView) { // works in Opera and FF         return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");     } else {         return null;     } } 

If the CSS rule for this was:

#fonttester {     font-family: sans-serif, arial, helvetica; } 

Then it should return helvetica if that is installed, if not, arial, and lastly, the name of the system default sans-serif font. Note that the ordering of fonts in your CSS declaration is significant.

An interesting hack you could also try is to create lots of hidden elements with lots of different fonts to try to detect which fonts are installed on a machine. I'm sure someone could make a nifty font statistics gathering page with this technique.

</div
 
 
 
 
8
 
vote

Una forma simplificada es:

  function getFont() {     return document.getElementById('header').style.font; }   

Si necesita algo más completo, verifique este fuera.

 

A simplified form is:

function getFont() {     return document.getElementById('header').style.font; } 

If you need something more complete, check this out.

</div
 
 
8
 
vote

Hay una solución simple: solo use element.style.font :

  function getUserBrowsersFont() {     var browserHeader = document.getElementById('header');     return browserHeader.style.font; }   

Esta función hará exactamente lo que quiera. En ejecución devolverá el tipo de fuente del usuario / navegador. Espero que esto ayude.

 

There is a simple solution - just use element.style.font:

function getUserBrowsersFont() {     var browserHeader = document.getElementById('header');     return browserHeader.style.font; } 

This function will exactly do what you want. On execution It will return the font type of the user/browser. Hope this will help.

</div
 
 
       
       
7
 
vote

Otra solución sería instalar la fuente automáticamente a través de @font-face6 que podría negar la necesidad de detección.

  @font-face {   font-family: "Calibri";   src: url("http://www.yourwebsite.com/fonts/Calibri.eot");   src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype"); }   

Por supuesto, no resolvería ningún problema de derechos de autor, sin embargo, siempre podría usar una fuente de freeware o incluso hacer su propia fuente. Necesitará ambos .eot & amp; .ttf Archivos para trabajar mejor.

 

Another solution would be to install the font automatically via @font-face which might negate the need for detection.

@font-face {   font-family: "Calibri";   src: url("http://www.yourwebsite.com/fonts/Calibri.eot");   src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype"); } 

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

</div
 
 
3
 
vote

Calibri es una fuente propiedad de Microsoft, y no debe distribuirse de forma gratuita. Además, requerir que un usuario descargue una fuente específica no sea muy fácil de usar.

Sugeriría comprar una licencia para la fuente e incrustarla en su solicitud.

 

Calibri is a font owned by Microsoft, and shouldn't be distributed for free. Also, requiring a user to download a specific font isn't very user-friendly.

I would suggest purchasing a license for the font and embedding it into your application.

</div
 
 
       
       
2
 
vote

Estoy usando Fount. Solo tiene que arrastrar el botón de Fount a la barra de su favorito, haga clic en él y luego haga clic en un texto específico en el sitio web. Luego mostrará la fuente de ese texto.

https://fount.artequalswork.com/

 

I am using Fount. You just have to drag the Fount button to your bookmarks bar, click on it and then click on a specific text on the website. It will then show the font of that text.

https://fount.artequalswork.com/

</div
 
 
1
 
vote

Puedes usar este sitio web:

http://website-font-analyzer.com/

hace exactamente lo que quieres ...

 

You can use this website :

http://website-font-analyzer.com/

It does exactly what you want...

</div
 
 
 
 
1
 
vote

Puede poner Adobe Blank en la Fuente-Familia después La fuente que desea ver, y luego los glifos no en esa fuente no se harán.

e.g.:

  font-family: Arial, 'Adobe Blank';   

En cuanto a lo que sé, no hay un método JS para saber qué glifos en un elemento se están prestando por qué fuente en la pila de fuentes para ese elemento.

Esto se complica por el hecho de que los navegadores tienen configuraciones de usuario para las fuentes Serif / Sans-Serif / Monospace y también tienen sus propias fuentes de retroceso codificadas que usarán si no se encuentra un glifo en ninguno de los Fuentes en una pila de fuentes. por lo que el navegador puede representar algunos glifos en una fuente que no está en la pila de fuentes o en la configuración de la fuente del navegador del usuario. Chrome dev Tools le mostrará cada fuente procesada para los glifos en el elemento seleccionado . Entonces, en su máquina, puede ver lo que está haciendo, pero no hay forma de decir lo que está sucediendo en la máquina de un usuario.

También es posible que el sistema del usuario puede jugar una parte en esto como E.G. ventana ¿La sustitución de fuentes en el nivel del glifo .

así ...

Para los glifos que le interesan, no tiene forma de saber si será prestado por el navegador / defensa del sistema del usuario, incluso si no tienen la fuente que especifique.

Si desea probarlo en JS, podría representar los glifos individuales con una familia de fuentes, incluyendo Adobe Blank y mida su ancho para ver si es cero, pero tendría que iterar exhaustivo cada glifo y cada fuente que usted quería probar , pero aunque puede conocer las fuentes en un elemento pila de fuente, no hay forma de saber qué fuentes se configura el navegador del usuario para usarlo para al menos algunos de algunos de Tus usuarios, la lista de fuentes que itera a través estará incompleta. (Tampoco es una prueba de futuro si las nuevas fuentes salen y comienzan a acostumbrarse.)

 

You can put Adobe Blank in the font-family after the font you want to see, and then any glyphs not in that font won't be rendered.

e.g.:

font-family: Arial, 'Adobe Blank'; 

As far as I'm aware there is no JS method to tell which glyphs in an element are being rendered by which font in the font stack for that element.

This is complicated by the fact that browsers have user settings for serif/sans-serif/monospace fonts and they also have their own hard-coded fall-back fonts that they will use if a glyph is not found in any of the fonts in a font stack. So browser may render some glyphs in a font that is not in the font stack or the user's browser font setting. Chrome Dev Tools will show you each rendered font for the glyphs in the selected element. So on your machine you can see what it's doing, but there's no way to tell what's happening on a user's machine.

It's also possible the user's system may play a part in this as e.g. Window does Font Substitution at the glyph level.

so...

For the glyphs you are interested in, you have no way of knowing whether they will be rendered by the user's browser/system fallback, even if they don't have the font you specify.

If you want to test it in JS you could render individual glyphs with a font-family including Adobe Blank and measure their width to see if it is zero, BUT you'd have to iterate thorough each glyph and each font you wanted to test, but although you can know the fonts in an elements font stack there is no way of knowing what fonts the user's browser is configured to use so for at least some of your users the list of fonts you iterate through will be incomplete. (It is also not future proof if new fonts come out and start getting used.)

</div
 
 

Relacionados problema

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

15  Necesito una forma de escalar una fuente para que se ajuste a un rectángulo  ( Need a way to scale a font to fit a rectangle ) 
Acabo de escribir un código para escalar una fuente para caber dentro (a lo largo de) un rectángulo. Comienza a los 18 anchos e ingresa hasta que se ajusta. ...

41  ¿Cómo puedo encontrar la ruta completa a una fuente de su nombre de visualización en una Mac?  ( How can i find the full path to a font from its display name on a mac ) 
Estoy usando la API de JavaScript de Photoshop para encontrar las fuentes en un PSD determinado. Dado un nombre de fuente devuelto por la API, quiero encont...

1  FONT-FACE funciona en todos menos una página, ¿cuál podría ser el problema? [cerrado]  ( Font face works on all but one page what could be the issue ) 
Es poco probable que esta pregunta ayude a cualquier visitante futuro; Solo es relevante para un pequeño área geográfica, u...

13  ¿Cuál es el valor constante de la fuente de subrayado en Java?  ( What is the constant value of the underline font in java ) 
¿Cuál es el valor constante de la fuente de subrayado en Java? font.bold negrita Font font.italic italic font ¿Cuál es la constante de fuente de sub...

1  Obtención de información de fuente en .NET  ( Getting font information in net ) 
Me preguntaba si alguien sabe cómo obtener las cosas programáticamente como la versión y los detalles de los derechos de autor de una fuente de tipo verdadero...

1  La aplicación mantiene 'purga de la memoria caché de fuentes' y finalmente se bloquea debido a la memoria baja, Android  ( App keeps purging from font cache and eventually crashes due to low memory an ) 
Estoy justo al comienzo de construir una aplicación (que aún no hace nada, pero muestra algunos botones) y cuando lo ejecuto, recibo el mensaje de error en Lo...

3  Ghostscript y PDF con fuentes no incrustadas  ( Ghostscript and pdf with fonts not embedded ) 
Mi configuración del sistema es OS X con GhostScript 9.02 Me gustaría saber (paso a paso) cómo agregar y configurar el archivo en GS que hacen posible realiza...

0  SSRS Export a PDF Formateo de diferentes implementados versus VS Export  ( Ssrs export to pdf formatting different deployed versus vs export ) 
Si veo el informe SSRS y venga a la vista previa de los resultados, luego optó para exportar la vista previa a PDF, la exportación se ve perfecta. (Las fuente...

182  Fuentes recomendadas para la programación? [cerrado]  ( Recommended fonts for programming ) 
Según lo que actualmente representa, esta pregunta no es un buen ajuste para nuestro Q & Amp; un formato. Esperamos que las...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos