@font-face svg не работает должным образом в Chrome?

У меня проблема с конкретным шрифтом и способом его отображения в Chrome.

Firefox показывает шрифт должным образом из-за использования ttf.

Chrome не использует антиалиасы, а шрифт слишком "острый" и уродливый.

Это объявление css, которое я использовал

@font-face {
    font-family: 'HelveticaNeueLT Std Thin';
    src: url(../fonts/h2.eot);
    src: url(../fonts/h2.svg#test) format('svg'),
         url(../fonts/h2.woff) format('woff'),
         url(../fonts/h2.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

Я пришел к выводу, что проблема связана с файлом svg/шрифтом. Если я вообще не использую хэш-тег и оставляю его как только .svg, он отображает сглаживание, но с другой строкой-линией, с небольшим отсутствием позиционирования. Если я добавлю .svg # что-нибудь, он вообще не сглаживает его и выглядит уродливым.

Любые предложения могут помочь мне исправить эту довольно неприятную проблему.

PS: Сглаживание Windows в порядке, я проверил это. Я также опробовал декларацию @media screen and (-webkit-min-device-pixel-ratio:0) только для шрифта svg, без успеха. Я понимаю, что это может быть repost, но, попробовав все решения из связанных вопросов, я немного отчаянно. enter image description here

ОТВЕТЫ

Ответ 1

Чтобы получать 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" />

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

Ответ 2

Как говорит Lily и font squirrel, ваш SVG-шрифт должен почти всегда находиться в нижней части списка источников @font-face. Вы не хотите, чтобы браузер использовал шрифт SVG, если он не может использовать что-либо еще.

Причиной этого является то, что шрифты SVG очень плохо поддерживаются, а поддержка уменьшается. Начиная с этой публикации (2015) шрифты SVG больше не поддерживаются Chrome (38) и поддерживаются только Safari 8, iOS Safari 8.1 и браузер Android 37. http://caniuse.com/#feat=svg-fonts

Изменить: По состоянию на февраль 2016, Android Browser 47 больше не поддерживает шрифты SVG. Safari и iOS Safari по-прежнему поддерживают их и кажутся единственными браузерами.

Ответ 3

При ссылке на SVG файлы в @font-face id (#) в пути к файлу указывает элемент внутри файла .svg. Чтобы найти правильный идентификатор, вы можете открыть его в редакторе и проверить тег <font>.

Например:

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato/lato-bold-webfont.eot');
    src: url('../fonts/lato/lato-bold-webfont.svg#latobold') format('svg'),
         url('../fonts/lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-bold-webfont.woff') format('woff'),
         url('../fonts/lato/lato-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

относится к:

<font id="latobold" horiz-adv-x="1187" >

Ответ 4

Генератор веб-шрифтов Font Squirrel упорядочивает их @font-face CSS следующим образом:

@font-face {
    font-family: 'HelveticaNeueLT Std Thin';
    src: url('../fonts/h2.eot');
    src: url('../fonts/h2.eot?#iefix') format('embedded-opentype'),
         url('../fonts/h2.woff') format('woff'),
         url('../fonts/h2.ttf') format('truetype'),
         url('../fonts/h2.svg#h2') format('svg');
    font-weight: normal;
    font-style: normal;
}

Подробнее о том, почему порядок здесь важен: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Если вам все еще неприятны проблемы, попробуйте использовать вышеупомянутый генератор, выберите опцию EXPERT и поиграйте с различными настройками (особенно при Rendering и X-height).

Ответ 5

попробуйте эту реализацию @font-face

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
  font-family: 'OpenSans';
  font-weight: 300%;
}

для получения дополнительной информации ознакомьтесь с этим примером https://github.com/ttibensky/BulletProof-font-face-implementation