Segoe UI Semilight в CSS не работает на Chrome

Question

Я пытаюсь использовать Segoe UI Light, Segoe UI Semilight и пользовательский интерфейс Segoe на веб-странице. Он отлично работает в IE, но Chrome, похоже, не проводит различия между Light и Semilight.

Я использую CSS, предложенный по телефону this StackOverflow answer, как это было предложено 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"); 
} 

Следующая jsfiddle показывает различные шрифты веса Segoe UI, включая свет и Полусветлый: http://jsfiddle.net/nHXDA/

Вот результаты.

Chrome:

IE:

Любые идеи о том, как это исправить?

Answer 1

Помимо того, что ваш шрифт будет отображаться только на ОС Windows Устройства правильно, пока они будут игнорироваться на всех других, у которых нет установленного шрифта, вам нужно убедиться, что у вас есть соответствующая резервная копия.

Во-вторых, ваше определение шрифта неверно и не работает с перекрестным браузером. Хотя Internet Explorer может напрямую использовать правильный файл шрифта, указанный src: local("Segoe UI Semibold");, все остальные браузеры должны ссылаться на семейство шрифтов. src: local("Segoe UI");.

В случае SemiBold необходимо указать определение шрифта, как это:

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

После того, как вы зафиксировали свое определение шрифта он должен выглядеть как на следующем снимке экрана. В этих скриншотах вы также увидите, что если семейство шрифтов указано с полным именем, а не с именем семейства шрифтов, шрифт будет отбрасываться в Times New Roman. Это происходит потому, что браузер не может разрешить имя шрифта, которое, по-видимому, является эксклюзивным для IE.

Не уверен, что это связано с тем, что я использую локальный шрифт, и если исправленный веб-шрифт исправлен, вам нужно внести дополнительные корректировки, чтобы хорошо выглядеть шрифтом. Возможно, веб-шрифты имеют специальные намеки на использование в Интернете.

Answer 2

Различные браузеры имеют разные способы визуализации шрифтов. Chrome, будучи самым большим виновником плохо рендеринга шрифтов в лучшие времена, я наткнулся на ярмарки несколько статей по этому вопросу (некоторые, как в последнее время.)

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

При установке Google Canary (еженощном «бета-версия» Google Chrome) и проверить их там, какие результаты вы получаете? Просто проверяйте, так как это может быть ошибка, зависящая от версии. Недавно прочитав несколько статей, связанных с обновлением Chrome, он больше не будет отображать пользовательский интерфейс Segoe на font-weight: 300/200.

Плюс, устали от использования локальных шрифтов, любой, кто не использует ПК с ОС Windows, не увидит эту визуализацию шрифтов, а также Mac/Linux/Chrome/Firefox.

Там же бесплатные альтернативы местных машин, которые вы можете загрузить/использовать в качестве WebFont (даже если вы планируете использовать локальный веб-сайт только), такие как Google's Open Sans.