4

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

站点 1、站点 2和站点 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');
}

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

4

8 回答 8

6

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

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

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

于 2013-11-08T18:51:02.487 回答
4

我遇到了许多字体嵌入问题，无论是将字体和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;
}
于 2013-01-11T05:07:59.203 回答
2

只想快点帮到大家

第一：把它放在 .htaccess

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

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

像这样！

于 2019-06-11T20:36:28.047 回答
1

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

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

希望修复它！

于 2013-01-11T04:45:29.647 回答
1

确切地！解决方案是从 css 中调用字体，区分大小写。例如不一样的调用是这样的： url (font/arial.ttf) 一个 ARIAL.TTF 文件必须是 url (font/ARIAL.TTF)

于 2014-08-15T20:08:23.440 回答
0

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

于 2019-02-07T18:05:14.700 回答
0

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

<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
于 2020-01-11T02:54:41.110 回答
0

我遇到了类似的问题 - 只是通过替换字体 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 网站- 然后找到我需要的字体。我的字体：搜索字体：roboto 类别：无衬线字体

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

    链接 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/缓存或在私人浏览器上尝试（隐身）

于 2022-03-03T07:26:50.560 回答