Segoe UI Semilight w CSS nie działa na Chrome

Question

Próbuję użyć Segoe UI Light, Segoe UI Semilight i Segoe UI na stronie internetowej. Świetnie radzi sobie w IE, ale wydaje się, że Chrome nie rozróżnia Light i Semilight.

Używam CSS sugerowanego na this StackOverflow answer, zgodnie z sugestią 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"); 
} 

Poniższy jsfiddle przedstawia różne grubości z Segoe UI, w tym światła i Semilight: http://jsfiddle.net/nHXDA/

Oto wyniki.

Chrome:

IE:

Wszelkie pomysły jak to naprawić?

Answer 1

Poza faktem, że czcionki będą wyświetlane tylko w systemie Windows Urządzenia poprawnie, podczas gdy będą ignorowane na wszystkich innych, które nie mają zainstalowanej czcionki, musisz upewnić się, że masz pasujący kod zastępczy.

Po drugie, twoja definicja czcionki jest zła i nie działa w przeglądarce. Podczas gdy Internet Explorer może bezpośrednio użyć poprawnego pliku czcionki, określonego przez src: local("Segoe UI Semibold");, wszystkie inne przeglądarki muszą odwoływać się do rodziny czcionek. src: local("Segoe UI");.

W przypadku SemiBold trzeba podać definicję czcionki tak:

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

Po stałe swoją definicję czcionki powinien wyglądać następująco widać na zrzucie ekranu. Na tych zrzutach ekranu widać również, że jeśli rodzina czcionek jest określona za pomocą pełnej nazwy zamiast nazwy rodziny czcionek, czcionka będzie zastępowana czcionką Times New Roman. Dzieje się tak, ponieważ przeglądarka nie może rozpoznać nazwy czcionki, która wydaje się być wyłączna dla IE.

Nie jestem pewien, czy to dlatego, że używam lokalnej czcionki i jeśli dostępna czcionka internetowa została poprawiona, musisz wprowadzić dodatkowe poprawki, aby dobrze wyglądać. Może się zdarzyć, że czcionki sieciowe mają specjalne wskazówki dotyczące korzystania z sieci.

Answer 2

Różne przeglądarki mają różne metody renderowania krojów. Chrom, będąc największym winowajcą za słabo renderowanie czcionek w najlepszych czasach, natrafiłem na sprawiedliwych kilku artykułów na ten temat (niektóre jak od niedawna.)

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

Jeśli zainstalować Google Kanaryjskie (nocne "wersja beta" Google Chrome) i przetestuj je tam, jakie masz wyniki? Właśnie sprawdzam, ponieważ może to być błąd specyficzny dla wersji. Czytanie kilku artykułów wydaje się być ostatnio aktualizacją w Chrome, nie będzie już poprawnie wyświetlać interfejsu Segoe na font-weight: 300/200.

Dodatkowo, bądźcie znużeni używaniem lokalnych czcionek, każdy, kto nie używa Windowsa, nie będzie widział tego kroju pisma, jak Mac/Linux/Chrome/Firefox OS.

Nie

jest bezpłatne alternatywy dla maszyn lokalnych, które można pobrać/używać jako webfont (nawet jeśli planujesz używać lokalną witrynę tylko) takie jak Google's Open Sans.