Segoe UI Semilight in CSS funktioniert nicht in Chrome

Question

Ich versuche Segoe UI Light, Segoe UI Semilight und Segoe UI auf einer Webseite zu verwenden. Im IE ist das sehr gut, aber Chrome scheint nicht zwischen Light und Semilight zu unterscheiden.

Ich verwende das CSS vorgeschlagen auf this StackOverflow answer, wie von Microsoft vorgeschlagen.

/* 
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"); 
} 

Die folgende jsfiddle zeigt verschiedene Schriftschnitte von Segoe UI, einschließlich Licht und Halb-: http://jsfiddle.net/nHXDA/

Hier die Ergebnisse.

Chrome:

IE:

Alle Ideen, wie dieses Problem beheben?

Answer 1

Neben der Tatsache, dass Ihre Schrift wird nur unter Windows angezeigt werden Geräte korrekt, während es auf allen anderen Geräten ignoriert wird, auf denen die Schriftart nicht installiert ist, müssen Sie sicherstellen, dass Sie ein passendes Ersatzgerät haben.

Die zweite Sache ist, dass Ihre Schriftartdefinition falsch ist und nicht über den Browser funktioniert. Während Internet Explorer in der Lage ist, direkt die korrekte Schriftartendatei zu verwenden, die durch src: local("Segoe UI Semibold"); spezifiziert wird, müssen alle anderen Browser auf die Schriftfamilie verweisen. src: local("Segoe UI");.

Bei halbfett müssen Sie die Schrift Definition wie folgt angeben:

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

Sobald Sie Ihre Schriftart-Definition festgelegt es wie der folgende Screenshot zeigt aussehen sollte. In diesen Screenshots sehen Sie auch, dass wenn die Font-Familie mit dem vollen Namen anstelle des Schriftfamiliennamens angegeben wird, die Schriftart auf Times New Roman zurückgreift. Dies geschieht, weil der Browser den Namen der Schriftart nicht auflösen kann, was ausschließlich für IE zu sein scheint.

Nicht sicher, ob es ist, weil ich die lokale Schriftart verwende und wenn die verfügbare Webschriftart repariert worden ist, müssen Sie zusätzliche Anpassungen vornehmen, um die Schriftart gut zu schauen. Es kann der Fall sein, dass die Web-Fonts speziell für die Verwendung im Internet gekennzeichnet sind.

Answer 2

Verschiedene Browser haben unterschiedliche Methoden zum Rendern von Schriften. Chrome, den größten Übeltäter für schlecht zu seinen Rendering-Schriftarten am besten Zeiten, stolperte ich über einen fairen paar Artikel zu diesem Thema (etwas wie die letzten.)

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

Wenn Sie Google Canary installieren (die Nightly "Beta" Build von Google Chrome) und testen sie dort, welche Ergebnisse erhalten Sie? Einfach prüfen, da es sich um einen versionsspezifischen Fehler handeln könnte. Wenn Sie ein paar Artikel lesen, die kürzlich in Chrome aktualisiert wurden, wird Segoe UI nicht mehr korrekt unter font-weight: 300/200 gerendert.

Plus, seien Sie müde über die Verwendung von lokalen Schriftarten, jeder nicht mit einem Windows-PC wird nicht sehen, diese Schriftart Render, ala Mac/Linux/Chrome/Firefox OS.

ist es kostenlose Alternativen zu den lokalen Maschinen, die Sie herunterladen können/Verwendung als WebFont (auch wenn Sie eine lokale Website verwenden möchten nur) wie Google's Open Sans.