laravel-链接到自定义字体

问题描述

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

I have already asked and played around with this question on Laravel discussions here (https://laracasts.com/discuss/channels/code-review/linking-to-custom-font-file-from-a-stylesheet-inside-a-blade-template). moving the file back to the stylesheet and removing the asset in the link the did not. I am trying to import custom fonts into my website, but because of Laravel's router, I can't directly link to the font files in my CSS. how can I get my custom fonts to display in the browser? So far, this dosent work:

 @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刀片引擎显示字体?

I tried replacing asset with public_path but that didn't work either. How do I get my fonts to display using the Laravel blade engine?

推荐答案

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

You can put your fonts in this directory /storage/app/public/fonts, so they can be accessible from the frontend:

这是您导入它们的方法:

This is how you can import them:

@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;
    }

比为某些元素设置样式:

Than to style some elements:

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

这篇关于laravel-链接到自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！