Segoe UI Light Font Non viene visualizzato correttamente in Google Chrome

Sto usando il font Segoe UI Light nel mio sito web.

il css usato è il seguente.

.divMainHeader { font-family:Segoe UI; font-size:28pt; font-weight:lighter; width:100% } 

Ma Google Chrome non sta rendendo questo font correttamente. Sto ottenendo un font in grassetto di Segoe UI Light in Chrome.

L’immagine. Le schermate si sono unite di diversi browser.

Le versioni dei browser che sto usando.

Internet Explorer: 9

Mozilla Firefox: 21

Google Chrome: 27

    È difficile farlo funzionare in Firefox. Il peso del font 300 non funziona poche volte in tutte le versioni. Il codice seguente ha funzionato per me e compatibile con tutti i browser.

      font-family: "Segoe UI Light","Segoe UI"; font-weight: 300; 

    Vedi qui Questo è da una soluzione HTML5, ma potrebbe essere di aiuto anche a te, dato che è anche in Visual Studio … Passando il mouse sopra le opzioni di font-font CSS ti dirà il peso in parole (Light, Semi, ecc.) 100: Thin 200: Extra Light (Ultra Light) 300: Light 400: Normal 500: Medium 600: Semi Bold (Demi Bold) 700: Bold 800: Extra Bold Spero che aiuti.

    Segui le opzioni sottostanti e aggiungi il peso del font invece di usare semibold o semilight. Usa semplicemente ‘segoe ui’ con una combinazione di 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"); } 

    Potrebbe essere a causa di vari motivi:

    1. Forse stai usando il formato del carattere sbagliato. Chrome supporta SVG, WOFF, TTF / OFT.
    2. Preso un approccio errato verso la definizione di font-weight, che induce il browser a interpretare erroneamente la proprietà weight-weight

    Esempio: http://pastebin.com/FiGvAfTk

    Stai definendo i tuoi font correttamente?

    Interessante … Sto avendo quasi il problema inverso … Riesco a ottenere Segoe UI Light per renderlo correttamente in Chrome e IE 10, ma non in FF 21.

    In un altro post, qualche tempo fa , è stato suggerito di usare qualcosa di simile a ciò che Microsoft usa sul loro sito …

     h1, h2, h3, h4, h5, h6, h7 { font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif"; font-weight: 300; } 

    Per i browser che non rispettano il font-weight + il font dell’interfaccia utente di Segoe, specificare prima l’UI Light di Segoe sembra garantire che renda il font più leggero.

    Tuttavia, in FF 21, sto ancora vedendo il normale font Segoe UI indipendentemente da ciò che provo. Firebug indica che sta scegliendo il font dell’interfaccia utente di Segoe dalla lista.

    Anch’io ho avuto un problema simile, con il browser che rendeva l’interfaccia utente Segoe standard rispetto alla versione più leggera. Se cambi la famiglia di font in Segoe UI Light, dovrebbe fare quello che vuoi.

    Si prega di consultare il codice rivisto di seguito:

     .divMainHeader { font-family:"Segoe UI Light"; font-size:28pt; font-weight:100; width:100% } 
     @font-face { font-family: 'Myfont'; font-style: normal; font-weight: 200; src: local('Segoe UI Light'), local('SegoeUI-Light'); } body{ font-family: 'Myfont'; } 

    questo codice ha risolto il mio problema come il tuo