html - 使用 Google 字体样式表时如何解决 'Allow control access origin' 错误?

标签 html css google-font-api

我想使用来自谷歌字体的 Open sans 字体,所以我在我的 html 文件中包含了样式表链接,但它在本地主机上显示“允许控制访问来源”错误。

enter image description here

代码

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>HTML5 responsive website</title>

        <link rel="stylesheet" href="styles/reset.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
        <link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet prefetch' type='text/css'/>

        <script src="js/modernizer.js"></script>
        <script src="js/respond.min.js"></script>

        <!-- external jquery file with fallback to local file if external one fails to load -->
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

        <script src="lightbox/js/lightbox-2.6.min.js"></script>
        <script src="js/prefixfree.min.js"></script>
        <script src="js/jquery.slides.min.js"></script>
    </head>

最佳答案

prefetch 属性可能会调用浏览器自动发出的 XHR 请求。然后,当您在 google 域上请求您的字体时,它涉及跨域问题。

但是,正如本文所述http://daker.me/2013/05/5-html5-features-you-need-to-know.html ,您可以使用 dns-prefetch 预取域 fonts.googleapis.com 以加快请求速度。

请注意,prefetchdns-prefetch 属性不是跨浏览器的。

关于html - 使用 Google 字体样式表时如何解决 'Allow control access origin' 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21106774/

相关文章:

html - 使用 Google Fonts 为每种字体请求不同的字符?

css - edge microsoft edge(桌面)不加载谷歌字体

javascript - 我正在尝试将选择选项值与常数相乘

javascript - 第一次查看输出时无法隐藏文本

css - 将文本区域高度设置为文本高度

html - 如何在我的应用程序中离线使用下载的 Google 字体?

html - 即使 img 在单独的 div 中,它也不会显示

javascript - 为什么相同输入字段文本中的 `readonly` 、 `disabled` 和 `required` 无法正常工作?

javascript - 3张图片居中,左右图片对齐中间图片

html - 将div旋转90度,位置固定在左上角