Question

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

他们在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

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

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

希望能解决它！

Answer 4

完全！解决方案是从css调用区分大小写的字体。例如不是这样的调用：url（font / arial.ttf）ARIAL.TTF文件必须是url（font / ARIAL.TTF）

Answer 5

我遇到了同样的问题，原来我的“ Fonts”文件夹上有一个大写字母，我将其重命名为FileZila，现在可以正常使用了！

Answer 6

只是想帮助你们，

首先：将其放在.htaccess中

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

第二：转到您托管网站的位置（在我的情况下为cpanel，然后检查文件许可权，从字体文件夹到字体为止，应该为755。

Answer 7

服务器具有utf8支持。因此，没有必要单独安装语言字体。如果您需要在网站中安装其他字体，请在网站字体文件夹中上载字体文件。但是，如果不支持任何语言，则需要在服务器上启用utf8的支持。您可以通过将下面提到的代码放在head标签中来实现它-

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

@ font-face在本地工作但在上传到主机空间时没有

7 个答案: