@font face choppy font в Chrome

У меня есть мой сайт, который я здесь создаю, и он выглядит хорошо (сейчас медиа-запросы CSS3 не работают для IE), но я найти мое лицо @font сломано и выглядит как дерьмо в Chrome для Windows (до сих пор это единственный основной, который я нашел).

Я искал его и нашел исправление CSS3 rbg, которое должно работать, но для меня это ничего не делало. Было ли пуленепробиваемое исправление от Paul Irish, но тогда мой шрифт ломается в Android. Я исследовал это пару часов, но не могу найти ничего, что сработает. Я слышал о Cufon, но я пытаюсь придерживаться @font лица, как это только для Chrome, что у меня есть эта проблема.

Я отправился на белку шрифта и получил шрифт для шрифта, который я использую, поэтому он выглядит как

@font-face {
font-family: 'GeosansLightRegular';
src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
     url('geosanslight-webfont.woff') format('woff'),
     url('geosanslight-webfont.ttf') format('truetype'),
     url('geosanslight-webfont.svg#GeosansLightRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Он работает с большинством браузеров (опять-таки, у меня не было возможности протестировать КАЖДЫЙ один, но я проверил его на IE 6-9, и он выглядит хорошо, FF 9 для Windows и FF 8 для OSX, Safari Opera и отлично выглядит. Chrome для окон просто не работает с командой @font face.

Есть ли у кого-нибудь советы относительно того, что я могу сделать, чтобы заставить его выглядеть лучше или исправить? (Помимо удаления класса @font face и использования обычного шрифта.)

Кроме того, я мог бы, однако, использовать условный комментарий от Chrome, чтобы просто просмотреть обычный шрифт, но тогда мой HTML не подтвердил бы?

Поэтому любая помощь будет оценена.

Ответы

Ответ 1

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

www.typekit.com

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

Ответ 2

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

fooobar.com/questions/205723/...

например.

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.)

Ответ 3

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

У меня есть Microsoft Windows 7 SP1 и Goodle Chrome 23.0.1271.64 м и FontAwesome для моего веб-приложения. Чтобы включить сглаживание для FontAwesome в Chrome, просто удалите, как показано в максимо - введите 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.)

Ответ 4

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

Ответ 5

Чтобы получать webfonts для рендеринга с хорошими антиалиасами в 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" />

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