@font-face не работает должным образом в Firefox 3.6 для Mac

Я разрабатываю веб-сайт на моем промежуточном сервере в Firefox 3.6 по адресу http://downhamcottage.co.uk/test

У меня есть файл css, связанный с сайтом, который

Я получаю более низкие шрифты в порядке наложения шрифтов, например, без засечек при начальной загрузке страницы, а затем шрифт Museo 300 и 500 срабатывает, как только пользователь переходит на другую страницу. В других браузерах работает нормально даже в ie7! Стиль @font-face, используемый в таблице стилей, выглядит следующим образом:

@font-face {
font-family: 'PermanentMarkerRegular';
src: url('../fonts/permanentmarker-webfont.eot#') format('eot'), 
     url('../fonts/permanentmarker-webfont.ttf')  format('truetype'),
     url('../fonts/permanentmarker-webfont.woff') format('woff'), 
     url('../fonts/permanentmarker-webfont.svg#webfontEHg8OqO7') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo300';
    src: url('museo300-regular-webfont.eot');
    src: url('../fonts/museo300-regular-webfont.eot#') format('eot'),
         url('../fonts/museo300-regular-webfont.woff') format('woff'),
         url('../fonts/museo300-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo300-regular-webfont.svg#webfontGEzJeS93') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Museo500';
    src: url('museo500-regular-webfont.eot');
    src: url('../fonts/museo500-regular-webfont.eot#') format('eot'),
         url('../fonts/museo500-regular-webfont.woff') format('woff'),
         url('../fonts/museo500-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo500-regular-webfont.svg#webfontZgaZZaau') format('svg');
    font-weight: normal;
    font-style: normal;
}

Любые мысли о том, почему это произойдет в Firefox 3.6 для Mac, будут оценены, поскольку я говорю, что это отлично выглядит в других браузерах?


person Jonathan Beech    schedule 28.03.2011    source источник
comment
Я бы предложил использовать FontSquirrel, чтобы убедиться, что CSS является кросс-браузерным.   -  person Evan Mulawski    schedule 28.03.2011


Ответы (2)


Насколько я понимаю, Firefox в целом не любит css в пределах ', кажется, что он должен быть в пределах "

ie:

@font-face {
     font-family: "PermanentMarkerRegular";
     src: url("../fonts/permanentmarker-webfont.eot") format("eot"), 
     url("../fonts/permanentmarker-webfont.ttf")  format("truetype"),
     url("../fonts/permanentmarker-webfont.woff") format("woff"), 
     url("../fonts/permanentmarker-webfont.svg#webfontEHg8OqO7") format("svg");
     font-weight: normal;
     font-style: normal;
}

Также у вас есть # в конце вашего файла .eot, я не уверен, зачем вам это нужно.

person Chris James Champeau    schedule 04.11.2011

Возможно, это связано с тем, что он все еще ожидает загрузки шрифтов. От Mozilla:

Когда Gecko отображает страницу, на которой используются веб-шрифты, он сначала отображает текст, используя лучший резервный шрифт CSS, доступный на компьютере пользователя, пока ожидает завершения загрузки веб-шрифта. По завершении загрузки каждого веб-шрифта Gecko обновляет текст, в котором используется этот шрифт. Это позволяет пользователю быстрее читать текст на странице.

person John Isaiah Carmona    schedule 18.04.2012