Come ottenere i pesi dei font disponibili?

Question

C'è un modo per ottenere l'elenco dei pesi per caratteri particolari in JavaScript?

Voglio creare un selettore come in Photoshop.

Answer 1

Sono poco chiaro circa il vostro obiettivo finale, però ....

Se si utilizza qualcosa come google font si dovrebbe già conoscere tutte le possibili pesi disponibili. In altre parole, se fornisci il tuo font personale, sei il maestro di tutto ciò che è disponibile.

Answer 2

No! Se un carattere tipografico è in realtà un font-weight di un altro è conoscenza esoterica che Javascript non ha modo di elaborare. È possibile definire quali pesi-carattere ha una famiglia di caratteri che utilizza le regole CSS @font-face e in un modo questo illustra l'impossibilità di ottenere ciò che si sta chiedendo.

Immediatamente sotto, ho una configurazione standard @font-face piuttosto carina per un font con 3 pesi.

@font-face { 
    font-family: Barney; 
    src: url(barney_regular.ttf); 
    font-weight: 400; 
} 

@font-face { 
    font-family: Barney; 
    src: url(barney_light.ttf); 
    font-weight: 300; 
} 

@font-face { 
    font-family: Barney; 
    src: url(barney_bold.ttf); 
    font-weight: 500; 
} 

Ma sapendo che ognuno di quei file .ttf rappresenta un peso diverso della stessa famiglia di font è arbitrario. Qui l'ho specificato, perché ne sono consapevole. Se un servizio automatico, ad esempio Font Squirrel, aveva preso quei 3 file, sarebbe probabilmente sono usciti con questo:

@font-face { 
    font-family: barney_regular; 
    src: url(barney_regular.ttf); 
} 

@font-face { 
    font-family: barney_light; 
    src: url(barney_light.ttf); 
} 

@font-face { 
    font-family: barney_bold; 
    src: url(barney_bold.ttf); 
} 

Ecco, questi 3 pesi sono in realtà stati tutti specificato come famiglie di caratteri distinti, che ovviamente è un sbaglio. Ma in teoria avrei potuto fare cose più stupido:

@font-face { 
    font-family: barney; 
    src: url(barney_regular.ttf); 
    font-weight: 500; 
} 

@font-face { 
    font-family: barney; 
    src: url(barney_regular.ttf); 
    font-weight: 400; 
} 

@font-face { 
    font-family: barney; 
    src: url(barney_regular.ttf); 
    font-weight: 300; 
} 

Sopra, lo stesso carattere tipografico esatto viene assegnato a 3 pesi differenti. Quindi, anche se Javascript potrebbe rilevare le relazioni all'interno delle dichiarazioni @font-face, ad esempio quale file è associato a quale peso, stile & famiglia; quanti pesi sono stati specificati ... Non è ancora possibile stabilire se tali risorse esistono, sono state scaricate, rappresentano con precisione una larghezza diversa dello stesso tipo di carattere.

La tipografia Web ha subito grandi cambiamenti negli ultimi 10 anni, ma è ancora (relativamente parlando) un mezzo di spazzatura per l'impostazione dei caratteri.