css - 将自定义字体添加到 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 的 Angular 来看。

Answer 1

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

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

查看文章 Using @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。