Веб-шрифт не отображается в Firefox - PullRequest
Новая
       55

Веб-шрифт не отображается в Firefox

3 голосов
/ 02 апреля 2012

http://miche.com/

Это самая странная вещь. На приведенной выше странице мы используем два веб-шрифта и их различные веса: Benton Sans и Jubilat, для которых у нас есть лицензии. H2 («Заинтересованы в присоединении к Мишу?», «Уже являетесь представителем Миша?») Настроен на Jubilat Regular и правильно отображается в Firefox; однако h1 («Добро пожаловать!») - это свет Jubilat, и он выглядит как Times New Roman.

Оба веса генерируются с помощью Font Squirrel. Оба размещены на одном сервере. Оба кодируются одинаково. Я перезагружал файлы. Я пытался, если IE так FF не пытается использовать .eot. Прежде чем сказать: да, я пробовал Bulletproof.

Почему Регулярный появляется, когда Света нет? Интересно, я просто не использую правильную комбинацию CSS. 

@font-face {
    font-family: 'JubilatLight';
    src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot');
    src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot?#iefix') format('embedded-opentype'),
         url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.woff') format('woff'),
         url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf') format('truetype'),
         url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.svg#JubilatLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
#main-container h1.jubilat {
    font-family: "JubilatLight";
    font-weight: normal;
    font-size: 40px;
    color: #701271;
    text-align: center;
}

Ответы [ 5 ]

9 голосов
/ 03 апреля 2012

Я понял это.Firefox не принимал абсолютные ссылки, а вместо этого хотел относительные.В сочетании с Mo'Bulletproof я смог заставить его отображаться так: 

@font-face{ /* for IE */
font-family:JubilatLight;
src:url(/FileUploads/CMS/Documents/jubilatlightwebfont.eot);
}
@font-face { /* for non-IE */
font-family:JubilatLight;
src:url(http://:/) format("No-IE-404"),url(/FileUploads/CMS/Documents/jubilatlightwebfont.ttf) format("truetype");
}
#main-container h1.jubilattest {
    font-family: "JubilatLight";
    font-weight: normal;
    font-size: 40px;
    color: #701271;
    text-align: center;
}

, а затем мой HTML: 

<div id="main-container">
   <h1 class="jubilattest">WELCOME!</h1>
</div>

Теперь, когда я понял это,Я смогу исправить другие шрифты.Спасибо вам три за ваши предложения.

7 голосов
/ 29 ноября 2012

Просто хочу сообщить, что есть способ настроить htaccess (описанный Yu-Jie Lin )

его код: 

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
4 голосов
/ 02 апреля 2012

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

jubilatlightwebfont.woff , например, выдает ошибку 404.

Посмотрите на веб-консоль Firefox,Выдает некоторые ошибки, например: 

downloadable font: download failed (font-family: "JubilatLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf @ https://www.miche.com/FileUploads/CMS/Documents/MicheCorp092911v2.css

(кстати, элементы h2 тоже используют Times New Roman, для меня.)

3 голосов
/ 02 апреля 2012

Я посмотрел на ваш CSS, и похоже, что вы неправильно определяете свой шрифт для H2, поэтому по умолчанию используется TimesNewRoman: 

#main-container h2.jubilat {
 color: #701271;
 font-family: "jubilat"; // <----------------
 font-size: 18px;
 font-weight: normal;
 text-align: center;
}
0 голосов
/ 10 июня 2014

попробуйте использовать реализованные файлы шрифтов в кодировке base64 в css-doc: 

@font-face {
  font-family:"font-name";
  src:url(data:font/opentype;base64,[paste-64-code-here]);
  font-style:normal;
  font-weight:400;
}

source: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

это работает отлично ...

...