Segoe UI Light Font Wird in Google Chrome nicht richtig angezeigt

Question

Ich verwende Segoe UI Light Schriftart auf meiner Website.

das css verwendet wird, ist wie folgt.

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

Google Chrome rendert diese Schriftart nicht richtig. Ich erhalte eine Fettschrift von Segoe UI Light in Chrome.

Das Bild.

Die Versionen der Browser, die ich verwende.

Internet Explorer: 9

Mozilla Firefox: 21

Google Chrome: 27

Answer 1

konnte aus verschiedenen Gründen sein:

1. Vielleicht verwenden Sie das falsche Schriftformat. Chrome unterstützt SVG, WOFF, TTF/OFT.
2. die einen falschen Ansatz zur Definition von font-weight genommen, die den Browser führt die font-weight Eigenschaft falsch

Probe zu interpretieren: http://pastebin.com/FiGvAfTk

Sind Sie definieren Ihre Schriften richtig?

Answer 2

Interessant ... Ich bin fast das umgekehrte Problem mit ... kann ich Segoe UI Licht bekommen richtig 10 in Chrome und IE zu machen, aber nicht in FF 21.

In another post some time back, wurde vorgeschlagen, zu verwenden, etwas ähnliches, was Microsoft verwendet auf ihrer Website ...

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; 
} 

Für den Browser, die keine Garantie für font-weight ehrt + die Segoe UI-Schriftart, die Angabe Segoe UI Licht scheint zunächst, dass es die rendert leichtere Schrift.

Allerdings, in FF 21, sehe ich immer noch die normale Segoe UI Schriftart unabhängig davon, was ich versuche. Firebug gibt an, dass es die Schriftart Segoe UI aus der Liste auswählt.

Answer 3

Ich hatte ein ähnliches Problem selbst, mit dem Browser nur Rendering Standard Segoe UI im Gegensatz zu der leichteren Version. Wenn Sie die Schriftart-Familie zu Segoe UI Light ändern, sollte es tun, was Sie wollen.

Bitte beachten Sie den geänderten Code unter:

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

Answer 4

@font-face { 
    font-family: 'Myfont'; 
    font-style: normal; 
    font-weight: 200; 
    src: local('Segoe UI Light'), local('SegoeUI-Light'); 

} 

body{ 
    font-family: 'Myfont'; 
} 

dieser Code fixiert mein Problem wie das Ihre

Answer 5

Es ist schwierig, diese Funktion in Firefox. Schriftgewicht 300 funktioniert nicht in allen Versionen. Der folgende Code funktionierte für mich und ist mit allen Browsern kompatibel.

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

Siehe Here Dies wird von einer HTML5-Lösung ist, aber es könnte auch Ihnen helfen, wie es auch in Visual Studio ... Bewegen der Maus über die CSS font-weight Optionen werden Ihnen das Gewicht in Worten sagen (Licht, Halb, etc.) 100: Thin 200: extra Light (ultra Light) 300: Licht 400: normal 500: Medium 600: Semi Bold (Demi Bold) 700: Bold 800: extra Bold Hoffe es hilft.

Folgen Sie den unten stehenden Optionen und fügen Sie font-weight hinzu, anstatt semibold oder semilight zu verwenden. Verwenden Sie einfach 'segoe ui' mit einer Kombination aus 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"); 
}