Пользовательский шрифт не отображается правильно

Я пытаюсь загрузить пользовательский шрифт на своем веб-сайте. В моем стиле.css у меня есть следующие атрибуты:Пользовательский шрифт не отображается правильно

@font-face { 
    font-family: billabong; 
    src: url('./fonts/billabong.ttf'); 
    font-weight: bold; 
} 

h1.header { 
    font-family: billabong; 
}

И в моем html У меня есть следующий код;

<h1 class="header">Welcome to</h1>

Однако, похоже, что по умолчанию используется другой тип шрифта, поэтому я предполагаю, что он не может его найти.

Шрифт возвращает одну директорию из моего файла css, а внутри папки с именем fonts я указал правильный путь для ее поиска? Если это не проблема, кто-нибудь знает, что я делаю неправильно?

источник

2014-09-23 Biscuit128

Возможно, вы можете попробовать сменить URL-адрес на '../fonts/billabong.ttf' –

Yup. '../' означает «вверх по одному каталогу» и '. /' означает текущий каталог. –

попробуйте добавить апострофы в атрибут font-family.

font-family: 'billabong';

Также используйте другие форматы. не все браузеры поддерживают ttf. подробнее об этом здесь: http://socialcompare.com/en/comparison/browser-fonts-support-comparison

Вы можете экспортировать TTF в WebFont здесь: http://www.font2web.com/

источник

2014-09-23 14:24:57 MoLow

На самом деле, ttf [поддерживается каждым крупным браузером] (http://caniuse.com/#feat=ttf). –

Я думаю, вы имеете в виду цитаты. Они действуют как апострофы тоже на клавиатуре, но технически вы помещаете эти типы значений в кавычки. –

этот пост с 2012 года, должен быть еще один хороший от 2014 года. –

Я думаю, что единственная проблема, вот ваш каталог.

Попробуйте сначала поместить файл шрифта в тот же каталог, что и ваш html-файл.

Тогда попробуйте этот код:

@font-face { 
    font-family: billabong; 
    src: url(billabong.ttf); 
    font-weight: bold; 
} 

h1.header { 
    font-family: billabong; 
}

Если это не работает, попробуйте поставить свой начертание шрифта: жирный; в класс заголовка, посмотрите, помогает ли это.

Если он работает, тогда верните его туда, где у вас было это. Я ненавижу догадываться, но, как я понимаю, у вас есть файл шрифтов внутри вашего файла css. Я предполагаю, что ваш html-файл является одним каталогом выше вашего файла css. В этом случае вы можете сказать

@font-face { 
    font-family: billabong; 
    src: url(css/fonts/billabong.ttf); 
    font-weight: bold; 
} 

h1.header { 
    font-family: billabong; 
}

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

В любом случае я бы всегда можно найти на веб-сайте w3schools они объясняют это наилучшим образом: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Хотелось бы надеяться, что помогает.

источник

2014-09-23 14:37:18 Ali

Пользовательский шрифт не отображается правильно

ответ

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