首页 > 解决方案 > Laravel:谷歌字体@import +@font-face 停止在实时服务器上加载,但总是在本地服务器上加载

问题描述

我已@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700|Merriweather:300,300i,400,400i&display=swap'); 在 style.css 中导入,但在部署到 Live 服务器时出现此错误

拒绝访问 URI。由于访问限制,无法加载样式表。

第一个解决方案 我添加了@font-face 并将文件加载到我的 public/frontassets/fonts 中,并从我的样式表中调用它们。


@font-face {
  font-family: 'Hind'!important;
  src:  url('../fonts/Hind-Medium.ttf');
  src:  url('../fonts/Hind-Light.ttf') format('truetype'),
    url('../fonts/Hind-Bold.ttf') format('truetype'),
    url('../fonts/Hind-Regular.ttf') format('truetype'),
     url('../fonts/Hind-SemiBold.ttf') format('truetype'),
     url('../hind-regular-webfont.woff2') format('woff2'),
         url('../hind-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: normal;

加载样式表时,字体无法加载并被忽略。

解决方案2: 我添加了

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff
AddType application/font-woff2           .woff2



<IfModule mod_headers.c>
  <FilesMatch ".(eot|otf|svg|ttf|woff|woff2?)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

在我的 htaccess 文件中。字体仍然没有变化。

注意我正在从子域运行实时

谢谢您的帮助。

检查时不加载字体

检查后的图像@font-face 不加载

这是它们在我的 style.css 中的显示方式

style.css

            Fonts
====================================================================

 ***/

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700|Merriweather:300,300i,400,400i&amp;display=swap');

/*
font-family: 'Hind', sans-serif;
font-family: 'Merriweather', serif;
*/

@import url('owl.css');
@import url('fontawesome-all.css');
@import url('stroke-gap-icons.css');
@import url('flaticon.css');
@import url('animate.css');
@import url('jquery-ui.css');
@import url('jquery.fancybox.min.css');
@import url('scrollbar.css');
@import url('hover.css');
@import url('custom-animate.css');


@font-face {
  font-family: 'Hind'!important;
  src:  url('../fonts/Hind-Medium.ttf');
  src:  url('../fonts/Hind-Light.ttf') format('truetype'),
    url('../fonts/Hind-Bold.ttf') format('truetype'),
    url('../fonts/Hind-Regular.ttf') format('truetype'),
     url('../fonts/Hind-SemiBold.ttf') format('truetype'),
     url('../hind-regular-webfont.woff2') format('woff2'),
         url('../hind-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: normal;


}

@font-face {
  font-family: 'Signature';
  src:  url('../fonts/JustSignatureRegularea59.eot?lsn0el');
  src:  url('../fonts/JustSignatureRegularea59.eot?lsn0el#iefix') format('embedded-opentype'),
    url('../fonts/JustSignatureRegularea59.ttf?lsn0el') format('truetype'),
    url('../fonts/JustSignatureRegularea59.woff?lsn0el') format('woff'),
    url('../fonts/JustSignatureRegularea59.svg?lsn0el#Signature') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

标签: laravelfonts

解决方案


推荐阅读