Добавление пользовательского шрифта в приложения Laravel - PullRequest
Новая
       17

Добавление пользовательского шрифта в приложения Laravel

1 голос
/ 09 октября 2019

Итак, меня смущает это: 

@font-face {
  font-family:'rift';
  src: url('../vendor/fonts/Fort Foundry - Rift-Bold.otf') format('otf');
  font-style: 'normal';
  font-weight: '700';
}

Он живет в public/vendor/fonts/, и это сбивает с толку то, что, если я физически не установлю шрифт - шрифт не будет правильно отображаться.

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

Я не получаю ошибок в консоли с установленным шрифтом или без него. Есть ли способ проверить, что это на самом деле работает? Или поэтому у нас есть такие вещи, как запасные варианты? 

.site-name{
  color: #fff;
  font-size: 22px;
  font-family: rift, sans-serif; // Fallbacks
}

Кто-нибудь может объяснить концепцию использования пользовательских шрифтов и правильно ли я их настраиваю в css? С точки зрения Laravel.

1 Ответ

0 голосов
/ 10 октября 2019

Вы можете разместить файлы шрифтов на своем сервере, чтобы использовать собственный шрифт на своем сайте. Посетители не обязаны устанавливать шрифт на своем компьютере.

Убедитесь, что вы выбрали имя файла без пробелов и специальных символов. Вам нужно будет предложить различные форматы шрифта (например, .eot, .woff2, ...), чтобы он работал в разных браузерах и операционных системах. В противном случае будет использоваться запасной шрифт (в вашем случае sans-serif).

Ознакомьтесь с статьей Использование @font-face в CSS-хитрости. Вот как может выглядеть ваш CSS: 

@font-face {
  font-family: 'rift';
  font-style: 'normal';
  font-weight: '700';
  src: url('../vendor/fonts/fort-foundry.eot'); /* IE9 Compat Modes */
  src: url('../vendor/fonts/fort-foundry.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../vendor/fonts/fort-foundry.woff2') format('woff2'), /* Super Modern Browsers */
       url('../vendor/fonts/fort-foundry.woff') format('woff'), /* Pretty Modern Browsers */
       url('../vendor/fonts/fort-foundry.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../vendor/fonts/fort-foundry.svg#FortFoundry') format('svg'); /* Legacy iOS */
}

Устранение неполадок

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

...