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

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

Firefox отображает шрифт с помощью ТТФ.

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

это объявление 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, он делает antialiased но на a различная линия-высота, с немножко располагать. Если я добавлю .СВГ#ничего, это не сглаживания его на всех, и выглядит некрасиво.

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

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

17
css font-face google-chrome svg true-type-fonts

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" />

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

22

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

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

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

7

при ссылке на SVG-файлы в @font-face идентификатор (#) в пути к файлу указывает элемент внутри .файл 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

шрифт белка webfont генератор организует @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/

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

2

попробуйте эту реализацию @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

1