跨域字体问题

2024-04-12

请在发表评论之前阅读所有内容。

我目前正在开发一个托管在 Amazon Web Services (AWS) 上的大型网站。这使我们能够在网站可能承受较大流量负载的情况下使用可扩展性功能。

最初,我们首先将网站的代码分离为 HTML/PHP/Java 等的混合体,并在单独的服务器上拥有静态资产。当我第一次尝试在此设置中使用 font-face 时,我发现 Firefox 和 IE 无法加载字体,并且很快发现这是一个跨域问题。对此有多种解决方案,其中包括修改标头以允许访问字体文件。然而,我们使用的存储系统不允许这种类型的标头修改。

为了看看我是否能让这些字体在所有浏览器上工作,我将它们以及调用它们的 CSS 文件移动到与网站相同的域。然而,它们似乎仍然无法在 Firefox 或 IE 中加载。如果我复制代码并在文档中本地运行它,那么在所有浏览器中一切似乎都很好(因此文件不会损坏)。 Firefox 确实找到了这些文件,因为我可以看到它们是通过 FireBug 加载的。

我已经检查了所有 URL,以确保它们正确并解析它们应该解析的位置。

这是我在笑脸黑客中使用的字体 CSS:

@font-face {
    font-family : "AllerRegular";
    src : url('aller_rg-webfont.eot');
    src : local('☺'),
          url('aller_rg-webfont.woff') format('woff'), 
          url('aller_rg-webfont.ttf') format('truetype'), 
          url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
    font-weight : normal;
    font-style : normal;
}

CSS 文件与字体位于同一目录中。

我还在 .htaccess 文件中设置了 MIME 类型,该文件与字体位于同一文件夹中。

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
        <IfModule mod_headers.c>
                Header set Access-Control-Allow-Origin "*"
        </IfModule>
</FilesMatch>

如果您有任何想法请提出。
我已经在网上搜索了几天,但所有解决方案都让我失败。


目前,从 AWS 提供的网络字体可能无法在 Firefox 和 IE 9+ 中运行,因为 AWS 不支持 Access-Control-Origin-Header。看到这个在 AWS 论坛上。似乎是很多人的问题。

2012 年 7 月 17 日更新:

作为 AWS 的替代方案,Google 的云服务支持跨源文件服务。我刚刚设置了一个存储桶来提供网络字体,它似乎正在工作。请参阅此博客post http://googledevelopers.blogspot.com/2012/03/google-cloud-storage-adds-several.html文档 https://developers.google.com/storage/docs/cross-origin了解更多信息。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

跨域字体问题 的相关文章

  • 绝对元素后面元素上的文本选择

    我有一个覆盖元素 它隐藏了其他包含文本的 div 覆盖元素是绝对定位的 我希望用户能够选择这些 div 后面的文本 我的解决方案是隐藏用户事件 mouseDown 上的覆盖层 显示 无 并在 mouseUp 事件发生时再次显示它 这样 一旦
  • 在浏览器中覆盖 TAB

    如果我在输入字段中输入文本并按ENTER我所知道的所有浏览器的默认行为是提交表单 但是如果我按ENTER在文本区域内添加新行 每当我按下时 有什么方法可以模仿这种行为 缩进 而不是提交表单 TAB在文本区域内 Bespin https be
  • 带有子 div 的 div 的背景颜色

    div div This is a text inside a div element div div We are still in the div element div div Why isnt the background colo
  • 检测视频何时缓冲,如果缓冲则显示 gif

    我想知道是否有办法在视频缓冲时显示 gif 我正在使用 HTML5 视频标签 其中有一种方法可以检测视频何时缓冲 如果没有 是否有替代方法 我看过 如何检测视频何时缓冲 https stackoverflow com questions 1
  • 为什么 Chrome 给 body 元素添加边距? [复制]

    这个问题在这里已经有答案了 我有简单的 html 文档 是进入身体的一种元素 当我在 div 元素中设置 margin top 时 Chrome 会向 body 添加相同的边距 边距仅在开发者工具中可见 我的代码 div Test div
  • 自动更改时 onChange 事件不起作用

    我在一个选择框 usageDisplays 上有一个 onChange 事件 它根据第一个选择框的选定值填充下一个选择框
  • 使用javascript隐藏html元素

    JavaScript function hide article var htmlElement document getElementsByTagName article 0 htmlElement setAttribute visibi
  • 移动网络的 max-device-width 和 max-width 有什么区别?

    我需要为iphone android手机开发一些html页面 但是它们之间有什么区别max device width and max width 我需要针对不同的屏幕尺寸使用不同的CSS media all and max device w
  • 修复了当 CSS 过滤器应用于 Microsoft Edge 中的同一元素时不起作用的位置

    我正在 Edge 20 10240 16384 0 上测试这个 我有一个位置固定的元素 并且应用了 CSS 过滤器 这在除 Microsoft Edge 之外的所有浏览器中都非常有效 其中元素的位置不保持固定 此问题与 CSS3 过滤器直接
  • 在网页上写乐谱[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我希望能够在网页中编写乐谱和和弦 有没有可用的库 例如用于数学的 Mathjax 如果没有 那么还有其
  • CSS 比例和方形中心裁剪图像

    所以我的应用程序中有一个缩略图集合 其大小为200x200 有时原始图像没有这个比例 所以我计划将此图像裁剪为正方形 目前它只是拉伸图像以适合缩略图 所以说我的原始图像大小是400x800 那么图像看起来就很压扁 我想裁剪此图像 以便它查看
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • 使用 jQuery 对 CSS 变换进行动画处理

    我正在尝试为 div 制作动画 并让它绕 y 轴旋转 180 度 当我调用以下代码时 出现 jQuery 错误 my div animate transform rotateY 180deg webkit transform rotateY
  • 页面其余部分完成加载后延迟加载 html5 视频

    我有一个视频元素用作我正在构建的页面底部部分的背景 我试图通过将 src 存储为 data src 属性并使用 jQuery 在其他资源加载后将其应用到 src 属性 因为它不是英雄图像或任何东西 我想加载海报以节省加载时间 然后稍后加载视
  • 如何正确转义 HTML 属性中的引号?

    我在网页上有一个下拉菜单 当值字符串包含引号时 该下拉菜单会损坏 其值为 asd 但在 DOM 中它始终显示为空字符串 我已经尝试了所有我知道的方法来正确转义字符串 但无济于事
  • 元素上的框阴影行为

    Update 在我提交错误报告后 https bugs chromium org p chromium issues detail id 763337 https bugs chromium org p chromium issues de
  • 如何像在浏览器中一样检索准确的 HTML

    我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面 但对于其中一些页面 检索到的 HTML 不完整 我不太明白为什么 这是我用来废弃此页面的脚本 由于某种原因 每个产品的链接不在 HTML 中 Link http
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约
  • 使用 MailTo 链接,我可以向发件人发送副本吗?

    我们开发了一个非常简单的表单 一旦提交 就会填充一封电子邮件以发送支持票证 这些电子邮件目前发送给我们的 支持人员 但如果我们也能向发件人发送一份副本 那就更理想了 我们正在使用 mailto 链接 这可能吗 例如 我们的员工 Brad 填
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo

随机推荐