Пользовательский шрифт с помощью CSS - PullRequest
Новая
       71

Пользовательский шрифт с помощью CSS

6 голосов
/ 13 мая 2011

Сейчас я изучаю php, html и css и пытаюсь использовать собственный шрифт на своем сайте. Я нашел свойство @font-face, которое позволяет это сделать, но оно не работает. Что я делаю неправильно? CSS: 

@font-face {font-family: LazurskiCTT;src:url(../sources/fonts/ie/LazurskiCTT Regular.eot);}
/*IE*/ 
@font-face {font-family:LazurskiCTT;src:url(../sources/fonts/LazurskiCTT Regular.Ttf);}
/*Other browsers*/
#myFonts{font-family:LazurskiCTT;}

HTML: 

<p id="myFonts">Lazurski</p>

Может быть, это потому, что я использую его на своей локальной машине? Я запускаю его в FireFox.

Ответы [ 4 ]

8 голосов
/ 14 мая 2011

Самый простой (и лучший) способ заставить его работать, это использовать генератор fontsquirrel:

http://www.fontsquirrel.com/fontface/generator

4 голосов
/ 13 мая 2011

Если ваш путь к шрифту правильный, попробуйте это.Цитата ... некоторые говорят, что это не нужно, но я считаю, что это работает лучше всего.В некоторых случаях мой CSS разрывается без кавычек (особенно когда в пути присутствует пробел).

Примечание. Используйте этот сайт, чтобы преобразовать ваш ttf в eot, чтобы он работал в IE (поместите оба .ttf &.есть в том же каталоге).http://ttf2eot.sebastiankippe.com/

@font-face {
    font-family: "LazurskiCTT"; 
    src:url("../sources/fonts/ie/LazurskiCTT Regular.eot"); /*IE*/
    src:url("../sources/fonts/LazurskiCTT Regular.Ttf") format("truetype"); /*Non-IE*/

}

Это работает для моего сайта.Надеюсь, это работает и для вас.

2 голосов
/ 13 мая 2011

Должно работать на вашей локальной машине.Попробуйте следующее.

Убедитесь, что путь к шрифту указан правильно. 

@font-face {
font-family: CustomFont;
src: url('CustomFont.otf');
}
p {font-family:CustomFont, Helvetica, Arial}

<p>Text here</p>
2 голосов
/ 13 мая 2011

Вы пропускаете косую черту / после .., которая может быть уже.

Обратите внимание, что большинство систем на основе Linux чувствительны к регистру - .Ttf может не работать, если не написано точно таким образом.

Подробное руководство по настройке пользовательских шрифтов в браузерах см. Также в следующем вопросе: Ошибка при использовании пользовательских шрифтов в css

...