@font face изменчивый шрифт в Chrome

Я исправил это! Chrome нравится, когда вы сначала загружаете строку SVG. Просто переместите это в приоритет. Хм... кто-то должен сказать Font Squirrel.

https://stackoverflow.com/a/9041280/1112665

e.g.

src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
     url('geosanslight-webfont.svg#GeosansLightRegular') format('svg'),          
     url('geosanslight-webfont.woff') format('woff'),
     url('geosanslight-webfont.ttf') format('truetype');

дайте мне знать, если это работает для вас. ваше здоровье!

(Отредактировано simoneast: версия EOT перемещена наверх, иначе она сломает IE.)

Я нашел еще одно простое решение для моего случая.

У меня Microsoft Windows 7 SP1 и Goodle Chrome 23.0.1271.64 m, и я использую FontAwesome для своего веб-приложения. . Чтобы включить сглаживание для FontAwesome в Chrome, просто удалите его, сделайте так, как сказал maximo — начните определение src со шрифтом svg, но также удалите имя шрифта после SVG-хеш. Просто конвертируйте это:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype'),
       url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

к этому:

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.svg') format('svg'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Это помогает?

(Отредактировано simoneast: версия EOT перемещена наверх, иначе она сломает IE.)

Существует свойство CSS3 'font-smooth, поддерживаемое webkit. Вы пробовали это?

Чтобы веб-шрифты отображались с хорошим сглаживанием в Chrome в Windows, вам нужно использовать этот формат в объявлении шрифта:

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

По сути, вам нужно заставить Chrome использовать формат шрифта SVG. Вы можете сделать это, переместив URL-адрес версии .svg вверх, однако у Chrome в Windows были проблемы с испорченным макетом при этом (до версии 30 включительно). Эти проблемы решаются путем переопределения объявления шрифта с помощью медиа-запроса.

Также: иногда базовая позиция шрифтов OpenType и шрифтов SVG не совпадает, но вы можете настроить это, просто отредактировав файлы шрифтов SVG. Шрифты SVG основаны на xml, и если вы посмотрите на объявление

<font-face units-per-em="2048" ascent="1900" descent="-510" />

Вы можете изменить значение восхождения и привести его в соответствие с другими версиями формата шрифта.

После многих часов поиска исправления я нашел идеальное решение. Это стоит годовой платы, однако, если вы веб-дизайнер с несколькими сайтами, это обязательно!

www.typekit.com

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