@font-face 在本地工作，但在实时网站上不起作用

发布于 2024-12-07 05:34:09 字数 927 浏览 1 评论 0原文

我有一个正在生产的网站，它使用 @font-face 来渲染字体，这在本地环境中工作正常，但在上传到实时网站时失败。

链接到字体文件的 CSS 文件位于根目录中，并使用以下代码：

@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('css/fonts/ColabLig-webfont.eot');
    src: url('css/fonts/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/ColabLig-webfont.woff') format('woff'),
         url('css/fonts/ColabLig-webfont.ttf') format('truetype'),
         url('css/fonts/ColabLig-webfont.svg#webfontR2xcGGVv') format('svg');
    font-weight: normal;
    font-style: normal;

}

字体位于 /css/fonts/ 目录中。我尝试将以下内容添加到 .htaccess 文件中以尝试解决问题，但仍然无济于事：

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

我真的没有主意了！我只是觉得很奇怪，当我使用 XAMPP 查看时，跨浏览器没有任何问题，但是当我尝试在我的服务器（Apache）上查看它时，它在任何浏览器上都无法工作。

原文

I have a website in production which uses @font-face to render fonts, and this works fine in a local environment but fails when uploaded to the live website.

The CSS file which links to the font files is in the root directory, and uses the following code:

@font-face {
    font-family: 'ColaborateLightRegular';
    src: url('css/fonts/ColabLig-webfont.eot');
    src: url('css/fonts/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fonts/ColabLig-webfont.woff') format('woff'),
         url('css/fonts/ColabLig-webfont.ttf') format('truetype'),
         url('css/fonts/ColabLig-webfont.svg#webfontR2xcGGVv') format('svg');
    font-weight: normal;
    font-style: normal;

}

The font is in the /css/fonts/ directory. I have tried adding the following to an .htaccess file to try fix the issue but still to no avail:

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

I'm out of ideas really! I just find it very strange how I have no problems across browsers when viewing with XAMPP, but when I try and view it on my server (which is Apache) it wont work on any browser.

分享到QQ

分享到微博