Подтвердить что ты не робот

Разметка Chrome svg-Font-Rendering Layout

В настоящее время я работаю над небольшим проектом, в котором я бы хотел использовать webfonts через @fontface.

Я реализовал шрифт следующим образом:

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

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

Chrome font rendering problems

После некоторого поиска я нашел решение, которое, похоже, работает: вы просто перемещаете эту часть css:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

Итак, вы закончите с этим:

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

Теперь Chrome делает шрифты плавно, что отлично.

НО:

По какой-то причине этот SOMETIMES разбивает макет. Примерно в третий раз я загружаю страницу. Я получу что-то вроде этого:

Chrome Font problems

Все перемещено влево. Из их контейнеров выходят более длинные тексты. Выглядит очень странно.

** Кто-нибудь испытал эту проблему раньше?

Я был бы рад получить советы по этому поводу. **

Не забудьте взглянуть на себя: Просмотр Fireflycovers.com онлайн

Спасибо большое!

4b9b3361

ОТВЕТЫ

Ответ 1

У меня была эта точная проблема с моим собственным сайтом.

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

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}

Ответ 2

Я видел те же проблемы (или хуже) на нескольких сайтах. В большинстве случаев текст разбивается сверху.

Мое единственное решение в этом вопросе - вернуться к более раннему шрифту. Вы также можете попытаться добавить правило CSS: -webkit-font-smoothing: antialiased; для небольшого улучшения.

Ответ 3

Исправление заключается в дублировании правила @font-face.

Вы не обязательно нуждаетесь в этом в медиа-запросе в ответе Quka, хотя это хороший способ ориентироваться только на веб-браузеры.

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

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