将自定义字体添加到 laravel 个应用程序

Question

所以，我对此感到困惑：

@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的角度来看。

Answer 1

您可以在您的服务器上托管字体文件，以便在您的网站上使用自定义字体。访问者不需要在他们的机器上安装字体。

确保选择一个没有空格和特殊字符的文件名。您将需要提供不同格式的字体（如 .eot、.woff2、...）以使其在不同的浏览器和操作系统中工作。否则，将使用备用字体（在您的情况下 sans-serif）。

查看关于 CSS-技巧的文章 Using @font-face。这就是您的 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。

将自定义字体添加到 laravel 个应用程序

Adding custom font to laravel Applications

css

laravel

fonts

webfonts

疑难解答