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

Question

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

Firefox правильно показывает шрифт, связанный с использованием ttf.

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

Это объявление 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, но, пробовав все решения из связанных вопросов, я немного отчаялся.

Answer 1

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

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

Answer 2

Font Squirrel's webfont generator устраивает их @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).

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

Answer 4

попробовать это @ реализация

@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

Answer 5

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

Причина этого заключается в том, что Шрифты SVG очень плохо поддерживаются, а поддержка уменьшается. не касается этого поста (2015), SVG шрифты no longer supported by 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 по-прежнему поддерживают их и кажутся единственными браузерами.