时间戳

首页 > 解决方案 > 向 laravel 应用程序添加自定义字体

css - 向 laravel 应用程序添加自定义字体

问题描述

所以，我对此感到困惑：

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

标签： csslaravelfontswebfonts

解决方案

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

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

查看文章使用@font-faceCSS 技巧。这就是你的 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 */
}

故障排除

访问您的站点并打开开发者工具。转到选项卡Console。重新加载页面并注意错误以确保字体文件的路径正确。如果不是，则日志中将显示错误 404。

推荐阅读