Блог

Главная - Вопросы по программированию - файл ttf в @font-face не работает на ноутбуке с Windows

файл ttf в @font-face не работает на ноутбуке с Windows

#css #font-face

#css #font-face

Вопрос:

Я новичок в веб-разработке, не уверен, что это распространенная проблема. Я пытался использовать font-face для реализации шрифта в формате TTF.

Я пытался

 @font-face {
  font-family: "Univers-light-normal";
  src: url(font-family/Univers-light-normal.ttf);
}

а также

 @font-face {
  font-family: "Univers-light-normal";
  src: url(font-family/Univers-light-normal.ttf) format("truetype");
}

Но ни один из них не сработал. Я также попытался очистить кеш моего браузера, но он все еще не работал. Хотя, когда на этот раз я открыл те же файлы HTML / CSS на Mac (первоначально использовал ноутбук с Windows, но использовал Google Chrome на обоих ноутбуках), похоже, что он работает.

Я уже установил шрифт. И первый код отлично работает для файлов OTF. Я предполагаю, что полученный мной файл — это шрифты Mac TrueType вместо шрифтов Windows TrueType? Если да, есть ли способ определить разницу? И как я могу заставить его работать на ноутбуке с Windows?

Пожалуйста, также дайте мне знать, если есть другие возможные причины, по которым это не работает.

Комментарии:

1. Какой браузер на какой ОС Windows?

2. Google Chrome в Windows 10 Pro, 64-разрядная версия

3. В Chrome, если вы нажмете клавишу F12, вы попадете в инструменты разработчика. Если вы посмотрите на вкладку сеть ( документы ), вы можете проверить, нашел ли браузер файл шрифта, а на вкладке консоль он сообщит вам о любых ошибках.

Ответ №1:

Вы можете попробовать это, потому что это сработало для меня:

  • Одинарные кавычки для src
  • Попробуйте точно найти папку, в которой находится файл TTF, и, например, ‘./fonts/SFAtarianSystem.ttf’

Или вы можете проверить это:

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

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

Метки: