Вопрос о нестандартных шрифтах на сайте - PullRequest
Новая
       8

Вопрос о нестандартных шрифтах на сайте

0 голосов
/ 05 апреля 2011

Я пытаюсь использовать пользовательский шрифт для текста части моего сайта, и мне сложно понять, почему мой скрипт не распознает шрифт.Я загрузил ParisJetAime.otf в папку / font / из моей основной папки html и включил это в свой скрипт: 

 #font-face {
     font-family: h1style;
     src: url(font/ParisJeTAime.otf)
 }
 #text {
     font-size: 30px;
     color: #ffffff;
     font-family: ParisJeTAime.ttf;
     margin: 220px auto auto 130px 
 }

Мой тестовый тег div выглядит так: 

 <div id="main">
     <form method="post" action="">
         <div id="text">
             Font Test
         </div>
         <input type="text" name="q" id="search" />
         <input type="submit" name="submit" id="submit" value="Go!" />
     </form>
 </div>

Мне не хватает куска кода?Текст отображается, но в стандартном Tahoma, а не тот, который я хочу.Спасибо!

РЕДАКТИРОВАТЬ:

ИСПОЛЬЗУЕТСЯ fontsquirrel и получите это как новый код: 

#font-face {
    font-family: 'ParisJeTAimeRegular';
    src: url(fonts/'parisjetaime-webfont.eot');
    src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
         url(fonts/'parisjetaime-webfont.woff') format('woff'),
         url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
         url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
    font-weight: normal;
    font-style: normal;
  }
#text {
    font-size: 30px;
    color: #ffffff;
    font-family: parisjetaime-webfont.ttf;
    margin: 220px auto auto 130px ;

}

Все еще не повезло - есть идеи?

Ответы [ 3 ]

0 голосов
/ 05 апреля 2011

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

http://typekit.com/

http://www.google.com/webfonts

0 голосов
/ 05 апреля 2011

Вы используете его неправильно, оно должно быть @font-face, а font-family определяет имя, которое вы хотите использовать, поэтому в вашем случае: 

@font-face {
     font-family: 'ParisJeTAime';     // the name you want to use
     src: url('font/ParisJeTAime.otf');
}
#text {
    font-family: 'ParisJeTAime', Arial, etc.;    // the name you defined for your font
}

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

Кроме того, вы столкнетесь с кросс-браузерными проблемами, так как все браузеры используют разные типы шрифтов, поэтому просто .otf не собирается его сокращать (я даже не знаю, какой браузер использует .otf ...). Вам понадобится список различных исходных файлов (.eot, .woff, .ttf и т. Д.), Чтобы он работал в наиболее часто используемых браузерах.

Редактировать: После редактирования вы все равно используете его неправильно, вам нужно @ вместо #, и вам нужно использовать правильное имя в вашем #text: 

@font-face {
    font-family: 'ParisJeTAimeRegular';
    src: url(fonts/'parisjetaime-webfont.eot');
    src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
         url(fonts/'parisjetaime-webfont.woff') format('woff'),
         url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
         url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
    font-weight: normal;
    font-style: normal;
  }
#text {
    font-size: 30px;
    color: #ffffff;
    font-family: 'ParisJeTAimeRegular';
    margin: 220px auto auto 130px ;
}
0 голосов
/ 05 апреля 2011

Отметьте это для шрифтов, которые не являются безопасными для Интернета - fontsquirrel

...