Segoe UI Semilight in CSS non funziona su Chrome

Question

Sto cercando di utilizzare Segoe UI Light, Segoe UI Semilight e Segoe UI su una pagina Web. Rende grande in IE, ma Chrome non sembra distinguere tra Luce e Semilight.

Sto usando il CSS suggerito su this StackOverflow answer, come suggerito da Microsoft.

/* 
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight. 
*/ 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 200; 
    src: local("Segoe UI Light"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 300; 
    src: local("Segoe UI Semilight"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 400; 
    src: local("Segoe UI"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 600; 
    src: local("Segoe UI Semibold"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 700; 
    src: local("Segoe UI Bold"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-style: italic; 
    font-weight: 400; 
    src: local("Segoe UI Italic"); 
} 
@font-face { 
    font-family: "Segoe UI"; 
    font-style: italic; 
    font-weight: 700; 
    src: local("Segoe UI Bold Italic"); 
} 

Il seguente jsfiddle mostra vari font di Segoe UI, tra cui Luce e Semilight: http://jsfiddle.net/nHXDA/

Ecco i risultati.

Chrome:

IE:

Tutte le idee su come risolvere questo problema?

Answer 1

Oltre al fatto che il tipo di carattere verrà visualizzato solo su Windows I dispositivi correttamente mentre saranno ignorati su tutti gli altri che non hanno il font installato è necessario assicurarsi di avere un fallback corrispondente sul posto.

La seconda cosa è che la definizione del font è errata e non funziona su browser. Mentre Internet Explorer è in grado di utilizzare direttamente il file di font corretto, specificato da src: local("Segoe UI Semibold");, tutti gli altri browser devono fare riferimento alla famiglia di caratteri. src: local("Segoe UI");.

In caso di SemiBold è necessario specificare la definizione del carattere in questo modo:

@font-face { 
    font-family: "Segoe UI"; 
    font-weight: 300; 
    src: local("Segoe UI Semilight"), local("Segoe UI"); 
} 

Una volta che si fissa la tua definizione di carattere dovrebbe apparire come mostrato nella seguente screenshot. In quelle schermate si vede anche che se la famiglia di font viene specificata con il nome completo invece del nome della famiglia di font, il font tornerà a Times New Roman. Ciò accade perché il browser non può risolvere il nome del font, che sembra essere esclusivo per IE.

Non sono sicuro se è perché utilizzo il carattere locale e se il carattere web disponibile è stato corretto, è necessario apportare ulteriori modifiche per visualizzare il carattere corretto. Potrebbe essere il caso che i caratteri web abbiano un accenno particolare all'uso del web.

Answer 2

Diversi browser hanno diversi metodi di rendering di caratteri tipografici. Chrome, essendo il più grande colpevole per mal rendere i font il più delle volte, mi sono imbattuto una fiera pochi articoli su questo tema (alcuni come di recente.)

https://code.google.com/p/chromium/issues/detail?id=408587

Se si installa Google Canary (la notte build "beta" di Google Chrome) e testarli li, quali risultati ottieni? Solo controllando, come potrebbe essere un bug specifico della versione. Leggendo alcuni articoli sembra di recente un aggiornamento con Chrome, non renderà più l'interfaccia utente di Segoe correttamente a font-weight: 300/200.

Inoltre, sii stanco di utilizzare i caratteri locali, chiunque non utilizzi un PC Windows non vedrà questo rendering di tipo di carattere, ala Mac/Linux/Chrome/Firefox OS.

C'è

c'è Alternative a macchine locali che è possibile scaricare/uso come webfont (anche se si prevede di utilizzare un sito web locale), come Google's Open Sans.