Шрифт-Face не загружен

Я использую некоторые шрифты для костюмов на своем веб-сайте, но у меня возникла проблема с тем, что один из них не загружен, и я не могу понять, в чем проблема, вот код:

@font-face { 
    font-family: OuachitaWayWbw; 
    src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    font-family: 'ChromeYellowNF'; 
    src: url('fonts/Chrome Yellow NF.ttf');
}

#name { 
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}

Работа ChromeYellowNF. также я пытался поместить каждый из них в разные Font-face, но это не сработало.


html css font-face
person Chlebta    schedule 11.01.2013    source источник

Ответы (2)


arrow_upward
7
arrow_downward

У вас должно быть объявление @font-face для каждого шрифта:

@font-face { 
  font-family: OuachitaWayWbw; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: ChromeYellowNF; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

Одинарные кавычки не требуются.

Если вы хотите использовать пользовательские шрифты для IE9, вам также необходимо предоставить файл шрифта «.eot». http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

РЕДАКТИРОВАТЬ: Хорошо, разные браузеры имеют разные способы реализации шрифтов:

@font-face {
   font-family: OuachitaWayWbw; 
   src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"),
        url('fonts/Ouachita Way Wbw.woff') format("woff");
   src: url('fonts/Ouachita Way Wbw.eot');
}

Вам также может понадобиться добавить следующие типы в .htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Взято отсюда: font-face с неправильным типом MIME в Chrome

person 97ldave    schedule 11.01.2013
comment
Я сделал тест и посмотри, что у меня получилось: Resource interpreted as Font but transferred with MIME type application/octet-stream - person Chlebta; 12.01.2013
comment
Я отредактировал свой пост выше - я думаю, вам нужен правильный формат шрифта для используемого вами браузера, а также типы для .htaccess или типы MIME в IIS. - person 97ldave; 12.01.2013

arrow_upward
2
arrow_downward

Не уверен в этом, но похоже, что ваше имя семейства шрифтов, вероятно, должно быть в кавычках. Также вы можете попробовать поместить каждый шрифт в собственное объявление @font-face. Это должно решить вашу проблему. Я думаю, что он использует последнее семейство шрифтов, указанное в объявлении @font-face.

@font-face { 
  font-family: 'OuachitaWayWbw'; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: 'ChromeYellowNF'; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

#name {
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}
person Jesse Kinsman    schedule 11.01.2013
comment
Я уже сделал это, но без результата. и для цитат, потому что я сделал много изменений, поэтому я забыл их переписать. - person Chlebta; 12.01.2013
comment
Я сделал тест и посмотри, что у меня получилось: Resource interpreted as Font but transferred with MIME type application/octet-stream - person Chlebta; 12.01.2013