@ font-face не работает на Chrome - PullRequest
Новая
       25

@ font-face не работает на Chrome

13 голосов
/ 10 марта 2012

Я использую последнюю версию Google Chrome, и он вообще не будет отображать шрифт.

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

Объявление шрифта, которое я использую: 

@font-face {
    font-family: Dejaweb;
    src: url('DejaWeb.ttf');
}

@font-face {
    font-weight: bold;
    font-family: Dejaweb;
    src: url('DejaWeb-Bold.ttf');
}

Ответы [ 4 ]

9 голосов
/ 23 мая 2013

Всякий раз, когда @ font-face необъяснимо не работает для меня в предположительно совместимых браузерах, я помещаю это в свой файл .htaccess. Предполагается, что некоторые браузеры не будут загружать шрифты, размещенные в других доменах, и этот фрагмент кода устраняет это, но иногда это единственное средство заставить шрифты загружаться, которые также размещены в том же домене. Вообще это больше проблема с Firefox, чем с Chrome, но я только что использовал это для принудительного использования шрифтов в Chrome, пока Firefox работал нормально. Пойди разберись. 

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Другая необъяснимо странная вещь, с которой я столкнулся при использовании синтаксиса @ font-face, заключалась в том, что он не загружал файлы шрифтов должным образом с заглавными буквами в названии. Это было проблемой только один раз, и после того, как я несколько раз ударился головой об устранение неполадок @ font-face на рабочем столе, в качестве последнего средства я изменил все файлы шрифтов и имя семейства шрифтов на строчные, и это работало нормально ( Я думаю, что это было проблемой в когда-либо привередливых IE, и только один веб-сайт, который я делал, точно такой же синтаксис на другом веб-сайте работал хорошо с прописными и строчными буквами).

7 голосов
/ 10 марта 2013

Если вы поместите свои файлы шрифтов в папку с именем «fonts», а ваши CSS-файлы - в папку с именем «style», вы должны написать URL-адрес следующим образом 

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

Я только что исправил ту же ошибку, как эта.

5 голосов
/ 11 марта 2012

Попробуйте это 

   src:url('DejaWeb-Bold.ttf') format('truetype'),

Также, если шрифты доступны в другом формате, отличном от того, где вы их получили, я советую написать все кросс-браузерные совместимо следующим образом 

    @font-face {
     font-family: "Dejaweb";
     src: url("DejaWeb-Bol.eot") format('embedded-opentype'), /* EDIT correction on this line */
     url('DejaWeb-Bol.woff') format('woff'), /* Modern Browsers */
     url('DejaWeb-Bol.ttf') format('truetype'), /* Safari, Android, iOS */
     url('DejaWeb-Bol.svg#Dejaweb') format('svg'); /* Legacy iOS; correction on this line */
     font-weight:bold;
    font-style:normal;
  }
0 голосов
/ 06 октября 2015 
@font-face {    
font-family: 'FONT-NAME';
src: url('RELATIVE-FONT-URL') format('FONT-FORMAT');
}

div {
    font-family: 'FONT-NAME';
    font-weight: normal;
    font-style: normal;
}

Добавление веса шрифта и стиля шрифта с нормальным значением работало для меня.

...