@font-face 在本地工作，但在上传到托管空间时不工作

Question

我正在建立一个网站，并尝试使用名为 Tex Gyre Cursor 的免费字体获得跨浏览器兼容性。 到目前为止，我已经尝试了几种通过 Google 搜索的方法。

Site 1, Site 2 & Site 3

在 Chrome、Firefox、Safari 和 Opera 上进行本地测试时，它们已经奏效。虽然不在 IE 上。我不会为 IE 烦恼，因为它是一个巨大的痛苦，我已将 Tahoma 设置为它的备用字体。

问题是在我通过 FTP 文件管理器上传文件后出现的。网络主机是 GoDaddy。

我也上传了字体文件。

我访问了该网站，但字体是 Tahoma，这发生在前面提到的所有浏览器上。

我束手无策，无法辨别问题所在。

这是我第一次尝试使用 CSS：

@font-face{    
    font-family:'TexGyreCursor';
        src: url('fonts/texgyrecursor.eot');
        src: local('texgyrecursor'), 
             local('texgyrecursor'), 
             url('fonts/texgyrecursor.ttf') format('truetype'),
             url('fonts/texgyrecursor.svg#font') format('svg'),
             url('fonts/texgyrecursor.otf');
}

我的第二次尝试：

@font-face{
    font-family:'TexGyreCursor';
    src: url('fonts/texgyrecursor.eot');
    src: url('fonts/texgyrecursor.otf');
}

如果需要更多信息，请告诉我:)

Answer 1

我最近遇到了这个问题，我正在使用 xampp 在 windows 机器上进行设计并上传到 linux 服务器。 我终于发现字体文件是 CamelCase 并且 css 代码都是小写的。

它并没有打扰我的本地机器，但 linux 将 CAPITALS.font 和 capitals.font 视为 2 个单独的文件。

您可能想检查一下这是否是您遇到的问题。

Answer 2

我遇到过许多字体嵌入问题，无论是将字体和 CSS 文件托管在不同的服务器上，还是 IE 是绝对的 !@?#。

在 IE 中，按 12 将调出您的开发人员工具并检查显示的错误（如果有）。如果您看到以下任何错误：

CSS3111: @font-face encountered unknown error.
my-font.eot

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
my-font.eot?

我建议关注我几个月前打开的一个帖子，这可能会有所帮助：@font-face import not working in offline website/different host using online fonts via CSS in IE only。这只是 IE 的问题，所以如果您遇到同样的问题，也不会感到惊讶。将字体传输到其他服务器时，我遇到了其他问题。

对于任何未来的字体嵌入，我强烈建议使用以下 CSS 代码并确保所有涉及的文件类型都正确转换：

@font-face {
    font-family:'My-Font';
    src:url('../includes/fonts/my-font.eot');
    src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/my-font.woff') format('woff'),
            url('../includes/fonts/my-font.ttf') format('truetype'),
            url('../includes/fonts/my-font.svg#my-font') format('svg');
    font-weight:normal;
    font-style:normal;
}

Answer 3

只是想快速帮助你们，

首先：把这个放在 .htaccess 中

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

其次：转到您托管网站的位置，在我的情况下，它是 cpanel 并检查文件权限，从字体文件夹到字体应该是 755。

Answer 4

代码不应该有任何错误；应该是浏览器或网络问题。

1. 尝试清除所有缓存并重新加载页面几次。
2. 如果仍然不起作用，请转到 Chrome，加载页面，按 F12，转到“网络”选项卡，然后重新加载页面。查看浏览器是否加载了字体 CSS 文件和字体。
3. 如果出现 404 Not Found 错误，请将浏览器直接指向字体文件 (yourdomain.com/fonts/texgyrecursor.ttf)。
4. 如果无法直接访问字体文件，请检查是否已上传。然后检查文件的权限。
5. 如果仍然不起作用，请尝试添加 Google Webfonts 提供的 <link> 标签，然后上传。

希望能修复它！

Answer 5

没错！解决方案是从 css 中调用字体，区分大小写。比如不一样的调用是这样的： url (font / arial.ttf) a ARIAL.TTF file must be url (font / ARIAL.TTF)

Answer 6

我也遇到了同样的问题，原来我的“字体”文件夹上有一个大写字母，我用 FileZila 重命名了它，现在它可以正常工作了！

Answer 7

服务器支持utf8。因此，无需单独安装语言字体。如果您需要在您的网站中安装其他字体，请将字体文件上传到您的网站字体文件夹中。但是，如果任何语言不支持，那么您需要在您的服务器上启用对utf8 的支持。您可以通过将下面提到的代码放在 head 标签中来做到这一点-

<meta http-equiv=Content-Type content=text/html; charset=utf-8 />

Answer 8

我遇到了类似的问题 - 只是通过替换字体 URL/路径来解决它。

 1. add this into your head tag
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />

1. 在脚本中标识您的字体系列，您可以在脚本的字体链接/url 上找到它。

这是我的：

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>

1. 从以上细节，我可以发现字体家族是ROBOTO。 然后我访问GoogleFont Website - 然后找到我需要的字体。 我的字体： 搜索字体：roboto 类别：无衬线

2. 找到所需字体后 - 单击“选择此样式”按钮，您将获得如下链接/路径：

   link rel="preconnect" href="https://fonts.googleapis.com" 链接 rel="preconnect" href="https://fonts.gstatic.com" 跨域 链接 href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet"

将其复制到您的脚本中。

清除您的浏览器 cookie/缓存或在私人浏览器上尝试（隐身）