个人中心
gpt4 book ai didi

css - @font-face 导入在离线网站/不同的主机中不起作用，仅在 IE 中通过 CSS 使用在线字体

转载 作者：太空宇宙 更新时间：2023-11-04 04:56:23 25 4
gpt4 key购买 nike

IE 很奇怪。我看过 MIME 类型，添加了一个 .htaccess 文件

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

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

并且 IE9 开发人员工具似乎已经注意到了这一点，但同样没有变化。该网站目前处于离线状态(仅在硬盘驱动器上查看)- 虽然当它上传到不同的服务器时它仍然无法工作-所有 Javascript 和样式表都从 head 标签内链接。一切顺利。

根本没有正确导入字体。

我在开发者控制台中收到一条错误消息:

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.eot?#iefix

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.ttf

我对此进行了大量研究，并且我知道文档类型可能会妨碍这一点。我使用的是 UTF-8，其中 css 以 @charset "UTF-8"; 开头，我的 HTML 文件也以:

开头 
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">

我原以为这与字体转换有关，但不幸的是，如果是这样的话，当您直接从托管服务器查看网站时，该字体在 IE 中首先不起作用.

关于如何解决这个问题有什么想法吗？

同样在 IE 7 和 8 中，它们只使用 EOT 文件，我得到一个不同的错误:

CSS3111: @font-face encountered unknown error.
vitesse-bold.eot

字体目录.htaccess:

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

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

主网站.htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

CSS 字体导入:

@font-face {
    font-family:'Vitesse-Bold';
    src:url('../includes/fonts/vitesse-bold.eot');
    src:url('../includes/fonts/vitesse-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/vitesse-bold.woff') format('woff'),
            url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
            url('../includes/fonts/vitesse-bold.svg#vitesse-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Flama-Bold';
    src:url('../includes/fonts/flama-bold.eot');
    src:url('../includes/fonts/flama-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/flama-bold.woff') format('woff'),
            url('../includes/fonts/flama-bold.ttf') format('truetype'),
            url('../includes/fonts/flama-bold.svg#flama-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}

截图:

http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg使用 src:url('../includes/fonts/font.eot');

导入字体

http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg使用 src:url('http://sub-domain.domain.com/includes/fonts/font.eot');

导入字体

http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg使用 src:url('http://www.sub-domain.domain.com/includes/fonts/font.eot');

导入字体

不确定 IE 使用 http://www. 和 http:// 创建两种字体时发生了什么，但它现在似乎已停止工作。

最佳答案

实际问题

我们通过修复@font-face 代码使字体在 IE9 中正常工作，并将问题缩小到 EOT 文件。

这里的问题是字体文件本身中设置的字体名称和家族名称。出于某种原因，IE6-8 存在这两个属性不同的问题(尽管并非一直如此，因为我在我的网站上使用的自定义字体的每个属性都有不同的名称，并且它在所有方面都可以正常工作)。

我从他那里得到了原始的OTF文件，用FontForge把“fontname”、“family name”和“name for humans”设置成一样，然后把字体保存为TTF，在线转换成EOT 格式。

现在效果很好。我们为使 $#!7 在 IE 中工作所做的事情。

注意:我之前曾尝试将文件转换为 EOT(未对文件属性进行编辑)但没有成功。

原始答案

您如何引用您的字体文件？听起来好像您没有相对地链接到它们，或者它们在另一个域/主机名上。

如果您已经绝对链接到它们，例如:http://www.domain.com/fonts/myfont.eot 并且您通过 http://domain. com，那么你就会遇到 CORS 问题。我有这个问题，我认为这是一个 IE 问题，原来我只是在一个浏览器上使用 www 查看网站，而不是在 IE 上。

如果字体文件在另一个主机名或域上，您将需要启用 CORS，阅读更多:

http://enable-cors.org/

http://www.w3.org/TR/cors/

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

我用于@font-face 的代码:

@font-face {
font-family: "Vitesse-Bold";
src: url('../includes/fonts/vitesse-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/vitesse-bold.woff') format('woff'),
    url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
    url('../includes/fonts/vitesse-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Flama-Bold";
src:url('../includes/fonts/flama-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/flama-bold.woff') format('woff'),
    url('../includes/fonts/flama-bold.ttf') format('truetype'),
    url('../includes/fonts/flama-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

像这样使用:

font-family: "Vitesse-Bold", Verdana, sans-serif;

注意:src: local('(*%$@#@') 的使用不受<~4.0 默认android 浏览器的支持，并且会导致自定义字体根本无法工作。

关于css - @font-face 导入在离线网站/不同的主机中不起作用，仅在 IE 中通过 CSS 使用在线字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12371533/

25 4 0
文章推荐： linux - 更改crontab后如何正常启动Raspberry？
文章推荐： python - Pycuda 编译错误 stderr message unreadable
文章推荐： linux - 应该打印文件名的循环返回空行
文章推荐： c - 代理中的非阻塞套接字和 poll() 怪癖
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com