CSS Google Fonts - Курсив растягивается в IE

Question

У меня есть вопрос о Google Fonts.Я использую шрифт "Lato" из Google Fonts , и он отлично работает в Firefox, Chrome, IE9, но в IE 7 и 8 курсивная версия выглядит очень натянутой.

Я не делаю ничего слишком сумасшедшего, просто использую

font-style:italic; font-weight:700;

и включаю шрифт с помощью:

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic' rel='stylesheet' type='text/css'>

Это известная проблема с Google Fontsили я что-то не так делаю?

Спасибо!

Answer 1

Это старый вопрос, но я в течение часа гуглял, чтобы найти легкий обходной путь для этого искусственного жирного шрифта и искусственного курсива в IE8.Вот что сработало для меня: вместо того, чтобы загружать все шрифты одновременно, я загружаю их один за другим.Я предпочитаю метод @import в файле css, поэтому он выглядит так:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

Answer 2

По какой-либо причине (может быть, кто-то может помочь с объяснением причин), Google решил не предоставлять пользователям IE какие-либо варианты шрифтов, кроме обычного.Это поведение, по-видимому, контролируется пользовательским агентом - если вы загрузите URL-адрес CSS (в вашем случае http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic) в Firefox против IE вы увидите, что только один блок @font-face возвращается в IE.

Итак, самый простой способ обойти это - загрузить этот URL в Firefox и скопировать / вставить CSS в ваш собственный файл CSS, а не обслуживать его непосредственно из Google. Теперь IE будет иметь доступ и ко всем вариантам шрифтов.... но технически вы нарушаете связь между файлом CSS и файлами базовых шрифтов, которые не должны никогда не изменяться, но это полностью на усмотрение Google.

К сожалению, (часть их рассуждений), IE не очень хорошо отображает шрифт даже тогда. В моем тестировании полужирный вес выглядел более жирным, чем следовало бы, и курсив кажется немного слишком далеко друг от друга. Он по-прежнему выглядит приятнее, чем курсивКосой шрифт, который IE отображает без дополнительных вариантов, по крайней мере.

edit : После еще нескольких исследований я основалd отличная страница на Typekit , которая исчерпывающе документирует проблему.По сути, IE крайне ограничен в том, что касается пользовательских семейств шрифтов - единственный способ добиться успеха в IE - это определить свои варианты как отдельные семейства шрифтов в IE, а затем использовать эти разные шрифты, гдевы бы использовали font-weight и font-style в других браузерах.Это должно обеспечить универсальную совместимость.

edit2 : получается, что URL для шрифтов IE отличаются от URL для других браузеров (IE использует формат eot вместо woff).Исчерпывающий процесс того, как заставить это работать для вашего шрифта, будет следующим:

• Откройте http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic в firefox / chrome / etc и скопируйте css в новый файл или вВаша таблица стилей ie-only.
• Пройдите и извлеките все определения src 'local' и 'format', оставив вам только части 'url'.
• Для каждого варианта, указанного вURL вашей таблицы стилей шрифта (в вашем примере это будет 400, 700, 700italic и 900italic), загрузите таблицу стилей шрифта в IE с только этот вариант и откройте полученный CSS в текстовом редакторе.Например, загрузите http://fonts.googleapis.com/css?family=Lato:900italic, чтобы получить вариант, выделенный жирным курсивом.
• Найдите соответствующий вариант в новой таблице стилей (свойства font-style и font-weight должны совпадать) и замените woff src URL с eot для IE.Также предоставьте шрифту другое семейство - я рекомендую использовать суффикс с таким стилем и весом, как у Typekit, чтобы Open Sans стал Open Sans i9 и так далее.
• Сделайте это для всех оставшихся вариантов.
• Условно добавьте эту новую таблицу стилей вместо той, которую вы уже используете для других браузеров.
• Где бы вы ни использовали font-styleили font-weight в вашем css, добавьте также font-family, ссылаясь на новое семейное имя И правильное семейное имя, которое видели другие браузеры.Например: font-family: 'Open Sans i9', 'Open Sans'; font-weight: 900; font-style: italic;.Это будет использовать имя семейства шрифтов для совместимости с IE и базовое семейство + варианты в других браузерах.

Answer 3

Два примера не показывают одинаковый курсивный шрифт.Я предполагаю, что IE7 / 8 один искусственно выделен курсивом.Я также предполагаю, что это потому, что вес шрифта не совпадает с весом в файле шрифта;вместо этого попробуйте вес 500.