Question

我已经在这里讨论了Laravel讨论中的这个问题（https://laracasts.com/discuss/channels/code-review/linking-to-custom-font-file-from-a-stylesheet-inside-a-blade-template）。将文件移回样式表并删除链接中没有的资产。我试图将自定义字体导入我的网站，但由于Laravel的路由器，我无法直接链接到我的CSS中的字体文件。如何让自定义字体显示在浏览器中？到目前为止，这个剂量工作：

 @font-face { font-family: NexaBold; src: url('{!! asset('build/fonts/NexaBold.otf') !!}'); }

@font-face { font-family: NexaLight; src: url('{!! asset('build/fonts/NexaLight.otf') !!}'); }

@font-face { font-family: OpenSans; src: url('{!! asset('build/fontsOpenSans-Regular.ttf') !!}'); }

我尝试用public_path替换资产，但这也不起作用。如何使用Laravel刀片引擎显示我的字体？

Answer 1

您可以将字体放在此目录 / storage / app / public / fonts 中，以便可以从前端访问它们：

这是您导入它们的方法：

@font-face {
        font-family:'NexaBold';
        src: url('/fonts/NexaBold.otf') format('otf');
        font-style: normal;
        font-weight: normal;
    }
@font-face {
        font-family:'NexaLight';
        src: url('/fonts/NexaLight.otf') format('otf');
        font-style: normal;
        font-weight: normal;
    }
@font-face {
        font-family:'OpenSans';
        src: url('/fonts/OpenSans-Regular.ttf') format('ttf');
        font-style: normal;
        font-weight: normal;
    }

比为某些元素设置样式：

body{
    font-family: NexaLight,Arial,Helvetica,sans-serif;
}
h1, h2{
    font-family: NexaBold,Arial,Helvetica,sans-serif;
}

laravel - 链接到自定义字体

1 个答案: