@ font-face не работает (результат отличается от исходного шрифта)

Question

Я использую синтаксис @ font-face в моей теме tumblr. Шрифты я установил были доктор Soos Смелый и доктор Soos Light с помощью кода:

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

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

Проблема заключается в том, когда я использую эти шрифты, полученный шрифт отличается от оригинального шрифта. Разницу можно увидеть здесь http://celestetwit.tumblr.com/private/61000332979/tumblr_mszx4vL7iw1sdolt8

Код, конечно, помещается в элемент стиля. Но из-за того, что я не очень разбираюсь в CSS, и я также не знаю, влияет ли используемая выше тема tumblr для готовой темы, влияющая на код выше, я не знаю, какая часть пошла не так. Пожалуйста, помогите мне в решении этой проблемы. Код темы tumblr, который я использую, можно найти здесь http://pastebin.com/UqNL7X89 Пожалуйста, взгляните на него для справки.

Я также загрузил шрифты в tumblr и использовал код ниже, но я все равно получаю тот же результат.

@font-face {font-family: "doctorsoosbold"; src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.ttf');} 

@font-face {font-family: "doctorsooslight"; src: url('http://static.tumblr.com/qvrmxer/TpImsz0yf/doctor_soos_light_1.1.ttf');} 

Кроме того, при использовании этого семейства шрифтов в приведенном ниже коде результат тоже будет таким же.

.entry h1{font-family: doctorsoosbold; text-transform: uppercase; font-size: 15px; font-weight: 20px; letter-spacing: 1px;} 

Answer 1

Есть две проблемы с тем, что у вас есть.

1. Вы объявляли шрифты «doctor_soos_boldbold» и «doctor_soos_lightregular», но вы не указали правильный путь, по крайней мере, я считаю, у вас нет этих шрифтов в текущем каталоге. Вы должны указать, где шрифты правильно.

Где у вас есть:..

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

Каждое пятно, которое начинается с «URL (» должен иметь правильный URL для этих шрифтов Каждый один Итак, вам нужно сделать это:

@font-face { 
    font-family: 'doctor_soos_boldbold'; 
    src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.eot'); 
    src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.eot?#iefix') format('embedded-opentype'), 
     url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.woff') format('woff'), 
     url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.ttf') format('truetype'), 
     url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.svg#doctor_soos_boldbold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Вы должны иметь файл .eot, в .woff, в .ttf и .svg, все там, с этими именами. Проделайте то же самое с легкими шрифтами, все 4 файла также.

Имейте в виду, что Firefox требует, чтобы шрифты находились на том же сервере, что и запрашивающий CSS, и я не знаю, относится ли это к тому же субдомену: это означает, что он может не работать в Firefox, если он должен быть включен http://celestetwit.tumblr.com

1. Вы также не применяете эти шрифты к любым элементам на странице.

Для того, чтобы сделать это, вам нужно выбрать элемент, например, я собираюсь забрать ...

.entry { font-family: calibri; } 

.. и изменение шрифта семьи:

.entry { font-family: 'doctor_soos_lightregular', Arial, Helvetica, sans-serif; } 

.. вы сможете увидеть обновленный шрифт (это хорошая идея, чтобы иметь резервные объявления, как я показал выше. Устранена ошибка в Windows XP/IE 8, чтобы сделать с выбирает, с одной стороны.)