文章/答案/技术大牛

发布

社区首页 >问答首页 >向laravel应用程序添加自定义字体

问向laravel应用程序添加自定义字体
EN

Stack Overflow用户

提问于 2019-10-09 17:11:13

回答 1查看 3.5K关注 0票数 1

因此，我对此感到困惑：

@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中正确地设置它？从拉拉维尔的角度看。

webfonts

css

laravel

fonts

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-10 18:48:28

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

确保选择一个没有空格和特殊字符的文件名。您需要提供不同格式的字体(如.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错误。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58309125

复制

相似问题

问向laravel应用程序添加自定义字体
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向laravel应用程序添加自定义字体EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向laravel应用程序添加自定义字体
EN