2014-11-04 5 views
0

Я искал это в сети, нашел много статей и руководств, я следил за некоторыми из них, но все еще не получал желаемых результатов.Как использовать пользовательские шрифты с помощью CSS?

Я загрузил шрифт и поместил его в папку моего проекта. Это код, который я пишу, но он не меняет стиль шрифта.

@font-face 
{ 
    font-family: Montereybold; 
    src: url(font/Montereybold.ttf); 
} 

h1 
{ 
    font-size:36px; 
    font-family:Montereybold; 
} 

Просьба указать, что я делаю неправильно здесь.

Thanks

+0

по следующему адресу http://css-tricks.com/snippets/css/using-font-face/ –

+0

Откройте консоль и посмотреть, если он бросает 404 «не удалось найти файл», если это так, то ваш путь, вероятно, неверен – user2209644

+0

вы найдете здесь несколько пользовательских шрифтов, проверьте его http://www.google.com/fonts –

ответ

1

¿Вы пробовали процитировать имя шрифта? Кроме того, для лучшей совместимости загрузите несколько форматов шрифтов.

@font-face { 
    font-family: 'Montereybold'; 
    src: url('font/Montereybold.eot'); /* IE9 Compat Modes */ 
    src: url('font/Montereybold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('font/Montereybold.woff') format('woff'), /* Modern Browsers */ 
    url('font/Montereybold.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('font/Montereybold.svg#Montereybold') format('svg'); /* Legacy iOS */ 
    font-weight:normal; 
    font-style:normal; 
} 

С его помощью:

font-family:'Montereybold'; 
1

Возможно, неправильный адрес. Есть ли папка «font» в родительской папке вашего файла css? В противном случае попробуйте «../font/Montereybold.ttf».

Кроме того, ttf не поддерживается всем браузером. Используйте генератор шрифтов для получения наилучшего результата: http://www.fontsquirrel.com/tools/webfont-generator.

Смежные вопросы