@font face изменчивый шрифт в Chrome - PullRequest
Новая
       31

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

14 голосов
/ 29 января 2012

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

Я искал его и нашел исправление CSS3 rbg, которое должно работать, но оно ничего не сделало для меня. Сделал пуленепробиваемое исправление от Пола Айриша, однако тогда мой шрифт сломался в Android. Я исследовал это пару часов назад, но не могу найти ничего, что сработает. Я слышал о Cufon, но я пытаюсь придерживаться @font face, потому что у меня только проблема с 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 для Windows просто не работает с командой @font face.

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

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

Так что любая помощь будет оценена ..

Ответы [ 5 ]

16 голосов
/ 01 февраля 2012

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

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

например, 

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

2 голосов
/ 13 ноября 2012

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

У меня 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.)

1 голос
/ 08 октября 2013

Чтобы заставить веб-шрифты отображаться с хорошим сглаживанием в 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" />

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

1 голос
/ 29 января 2012

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

0 голосов
/ 02 февраля 2012

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

www.typekit.com

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

...