Czcionka niestandardowa czasami jest renderowana kursywą w IE8/IE7

Question

W wersjach IE7 i IE8 podczas używania niestandardowej czcionki internetowej tekst jest czasami renderowany kursywą, nawet jeśli jawnie ustawiono font-style: normal. Kwestia jest sporadyczna - kilka razy wyrenderuje grzywnę, potem odświeżam i wszystko jest napisane kursywą, potem odświeżam i wróciłem do normy.

Używam tego @font-face deklarację:

@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

tam a comment na this article wskazującą, może to być o kolejności zgłoszeń @font-face: jednak jedyną rzeczą, która zatrzymała problemem było usunięcie kursywy deklaracje zupełnie .

Another Stack Overflow answer sugeruje użycie Font Squirrel @ font-face generator; Nie mogę tego zrobić, ponieważ pliki czcionek internetowych, których używam, mają DRM.

Czy istnieje sposób rozwiązania tego problemu bez całkowitego usunięcia kursywy?

UPDATE: Po dalszych badaniach, wydaje się ten problem dotyczy także IE8, a nie tylko w trybie zgodności.

Answer 1

Dla każdej z nazw @font-facefont-family należy zamiast tego utworzyć niestandardową nazwę.

Przykład:

@font-face { 
    font-family: 'DINnormal'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINbold'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINitalic'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DINboldItalic'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

Po te reguły CSS są zdefiniowane, to można uwzględnić specyficzne reguły CSS:

li { 
    font: 18px/27px 'DINnormal', Arial, sans-serif; 
} 

Answer 2

Jeśli, tak jak ja, natknąłem się na to pytanie, podczas gdy przeżywa podobny problem używając czcionek TypeKit, this entry from the TypeKit blog wyjaśnia, w jaki sposób można wymusić unikatowe nazwy font-family dla każdego stylu ciężaru & czcionki TypeKit w celu zaadresowania go.

Answer 3

Miałem podobny problem, czcionka internetowa była wyświetlana kursywą podczas używania IE8 (Emulator), po wykopaniu i wykopaniu natknąłem się na artykuł, który sugeruje, że emulator może czasem wprowadzać w błąd, szczególnie jeśli chodzi o webFonts i co to jest zasugerował próbowanie witryny w rzeczywistej wersji IE8, ponieważ korzystam z maszyny z systemem Windows 7, której nie mogłem pobrać, więc korzystałem z tej strony o nazwie http://www.browserstack.com/ (Bez testerów lub fałszywych przeglądarek Testowanie w rzeczywistych przeglądarkach, w tym Internet Explorer 6 , 7, 8, 9, 10 i 11.)

i zauważyłem mój czcionka nie była już kursywą: D

Oto link do artykułu czytałem,

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

Nadzieja to pomaga facetów, jeśli natknąłem coś takiego podczas badania to naprawdę mogło uratować mi kilka godzin