Подтвердить что ты не робот

@font-face не работает на хром

Я использую последнюю версию 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');
}

Ответ 1

Всякий раз, когда @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, и только один веб-сайт, который я делал, точно такой же синтаксис на другом веб-сайте работал отлично с верхними и строчными символами).

Ответ 2

Если вы помещаете файлы шрифтов в папку с именем "fonts" и ваши файлы CSS в папку с именем "style", тогда вы должны написать url, как этот

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

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

Ответ 3

Попробуй это

   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;
  }

Ответ 4

@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;
}

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