Использование пользовательского @ font-face в CSS не работает ни в одном браузере

Итак, у меня есть HTML-страница, связанная с файлом CSS, который должен изменить шрифт класса div, называемого заголовком, на собственный шрифт с именем KeepCalm. Вот код для определения начертания шрифта:

@font-face {
  font-family: 'KeepCalm';
  src: url('Files\Fonts\KeepCalm.eot?') format('eot'), url('Files\Fonts\KeepCalm.woff') format('woff'), url('Files\Fonts\KeepCalm.ttf') format('truetype');
}

Вот код для изменения начертания шрифта класса div заголовка:

.header {
    font-family: KeepCalm;
}

Однако шрифты не отображаются ни в одном браузере, который я пробую, в Chrome, Firefox или IE. Я уже посмотрел, как это исправить, и пока не нашел решения.

Вот ссылка на шрифт, который я использую: Здесь.


html fonts css font-face
person TacoMakerMan    schedule 12.05.2016    source источник
comment
Проверьте, загружается ли ваш шрифт или нет. Возможно, ваш путь неправильный. stackoverflow.com/questions/18900720/   -  person Eduardo Arruda Pimentel    schedule 12.05.2016
comment
@EduardoArrudaPimentel Я трижды проверил путь, и я не уверен, что вы имеете в виду, проверяя, загружен он или нет; Я использую локальный файл, сохраненный в подпапке под названием ... \ Files \ Fonts   -  person TacoMakerMan    schedule 12.05.2016
comment
@ AndréDion: похоже, это и есть ответ.   -  person David says reinstate Monica    schedule 12.05.2016
comment
@ AndréDion Отладчик сообщает, что загрузка загружаемого шрифта не удалась. Не могли бы вы связать меня с учебником или чем-то еще по настройке веб-сервера, и будет ли это стоить? Я не очень опытный, извините.   -  person TacoMakerMan    schedule 13.05.2016
comment
@TacoMakerMan Вы можете запустить веб-сервер на своей машине и обслуживать там свои файлы, вам не нужно платить за внешний хост. Просто погуглите ‹вашу ОС› веб-сервер, и вы получите много информации.   -  person André Dion    schedule 13.05.2016

Ответы (3)


arrow_upward
2
arrow_downward

Сначала ваш src не отформатирован, попробуйте поменять его этим

src: url('/Files/Fonts/KeepCalm.eot?')

Примечание: всегда старайтесь использовать относительные пути

person winresh24    schedule 12.05.2016
comment
Я не совсем уверен, что это меняет, я пробовал это, и ничего нового не произошло. Вы только что добавили / в начале, верно? - person TacoMakerMan; 12.05.2016
comment
нет, ваша косая черта перевернута, посмотрите, это должна быть обычная косая черта, а не обратная косая черта - person winresh24; 12.05.2016
comment
@ winresh14 Понятно. Я заменил их штатными косыми чертами, и это ничего не изменило. - person TacoMakerMan; 12.05.2016
comment
проверьте файл, если он существует. ваш сайт уже работает? - person winresh24; 12.05.2016
comment
@ winresh14 Файл определенно существует, в настоящее время он не работает, сейчас это просто файл .html. - person TacoMakerMan; 12.05.2016
comment
попробуйте проверить элемент вашего веб-сайта и увидеть, что в консоли отсутствует шрифт. - person winresh24; 13.05.2016
comment
@ winresh14 Отладчик сообщает загружаемый шрифт: загрузка не удалась. - person TacoMakerMan; 13.05.2016

arrow_upward
2
arrow_downward

Предположим, что ваши папки такие:

|-- index.html
|--|Files
   |--|Fonts
      |-- KeepCalm-Medium.eot (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.woff (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.woff2 (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.ttf (Original File)

Я создал этот html-код:

<html>
    <head>
        <meta charset="utf-8">
        <title>Stack Overflow Test</title>
        <style type="text/css" media="screen">
            @font-face {
              font-family: 'KeepCalm';
              src:  
                    url('Files/Fonts/KeepCalm-Medium.eot?') format('embedded-opentype'),
                    url('Files/Fonts/KeepCalm-Medium.woff') format('woff'),
                    url('Files/Fonts/KeepCalm-Medium.woff2') format('woff2'),
                    url('Files/Fonts/KeepCalm-Medium.ttf') format('truetype');
            }
            .header {
                font-family: KeepCalm;
            }
        </style>
    </head>
    <body>

    <div class="header">
        Keep Calm
    </div>


    </body>
</html>

И это работает. Если у вас есть те же папки, которые предполагали и называли правильными файлами шрифтов, он будет работать. И вам не нужен веб-сервер. Простой html и работает.

person Eduardo Arruda Pimentel    schedule 12.05.2016
comment
Хорошо, поэтому я изменил раздел font-face на способ, который вы предложили, и добавил одинарные кавычки в семейство font-family. Он ничего не сделал, поэтому я также попытался использовать ваши тесты, и ни один из них тоже ничего не сделал. Понятия не имею почему. - person TacoMakerMan; 13.05.2016
comment
Не могли бы вы загрузить свой шрифт по публичной ссылке? Я скачаю и проверю код. - person Eduardo Arruda Pimentel; 14.05.2016
comment
Я добавил ссылку на главный вопрос, чтобы вы могли его проверить. Я преобразовал файл ttf во все другие форматы файлов, которые использовал. - person TacoMakerMan; 14.05.2016

arrow_upward
0
arrow_downward

Оказалось, что я использовал "Files \ Fonts \" в качестве пути к шрифту, хотя, поскольку это был файл css, который я использовал, он уже был в папке "Files", поэтому мне просто нужно было изменить его на " Fonts \ KeepCalm.tff ". Глупая ошибка, но ее легко упустить.

person TacoMakerMan    schedule 17.05.2016