Dlaczego niektóre czcionki Google są wyświetlane niepoprawnie w stylu kursywy?

Question

Eksperymentuję z dziwnym problemem z niektórymi czcionkami Google.

Na przykład, używam czcionki Muli aw niektórych przeglądarkach tekst jest wyświetlany w stylu kursywą gdy reguła CSS jest:

p { 
    font-style: normal; 
} 

Ja również otworzył Google Web Fonts website z kilku przeglądarek (I przetestowany w 16 różnych przeglądarkach na 6 różnych komputerach i Macach) i tylko w przypadku dwóch z nich wystąpił problem (jeden w przeglądarce Chrome i drugi w przeglądarce Firefox).

This screenshot porownuje side-by-side czcionki wyświetlanej w Firefoksie i przeglądarki, która pokazuje czcionkę kursywą stylu

Dlaczego tylko niektóre przeglądarki wyświetla te czcionki jako kursywa? Na co powinienem zwracać uwagę podczas śledzenia tego problemu?

Answer 1

Spekulacje! Jeśli testujesz na dwóch różnych komputerach, z tą samą przeglądarką i wersją przeglądarki, różnica w czcionkach prawdopodobnie pochodzi z systemu operacyjnego. Z interfejsem Googles API, gdy wywoływana jest aplikacja Firefox lub Chrome, używany jest lokalny atrybut, wywołujący wersję systemu operacyjnego tej czcionki, jeśli jest dostępna. W którym czcionka jest wywoływana lub podawana przez system operacyjny może być wersją kursywą zamiast normalną.

Moja sugestia to pobranie czcionki i ręczne zaimportowanie bez używania lokalnego atrybutu.

Podczas importowania API czcionki google następująco dzieje:

prośbą o Inconsolata z Firefoksa, na przykład, zwraca następujący CSS:

@font-face { 
    font-family: 'Inconsolata'; 
    src: local('Inconsolata'), url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype'); 
} 

wniosek Internet Explorer, z drugiej ręka, powraca:

@font-face { 
    font-family: 'Inconsolata'; 
    src: url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw'); 
} 

https://developers.google.com/webfonts/docs/technical_considerations