https 会影响谷歌 CSS 样式加载不了

https 会影响谷歌 CSS 样式加载不了

在网站开发中，我们常常会使用外部的 CSS 样式表来美化网页，提升用户体验。而谷歌提供了一些常用的 CSS 样式库，比如 Material Design Lite、Bootstrap 等，我们只需要在网页中引入相应的链接，就能使用这些优美的样式。

然而有时候，我们会遇到一个问题：就是当网站采用 HTTPS 协议的时候，谷歌的 CSS 样式加载不了。这个问题困扰了很多开发者，今天我们就来详细解释一下这个问题的原因和解决方法。

问题描述

当我们在网页中引入谷歌的 CSS 样式表链接时，通常是这样的：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

这样的链接就是通过 HTTPS 协议引入谷歌提供的 CSS 样式表。然而有时候，当我们的网站也采用了 HTTPS 协议，就会出现样式加载不了的情况。

问题原因

这个问题的原因其实很简单：浏览器在加载外部资源（比如 CSS 样式表）时，会遵循同源策略。也就是说，如果我们的网站是通过 HTTPS 协议访问的，那么加载的外部资源也必须是 HTTPS 协议，否则浏览器会认为是不安全的资源，从而阻止加载。

而谷歌的 CSS 样式表链接默认是通过 HTTP 协议来加载的，所以当我们的网站采用 HTTPS 协议时，浏览器会拒绝加载这些资源，导致样式加载不了。

解决方法

要解决这个问题，我们可以采取以下几种方法：

1. 使用相对链接

一个简单的解决方法是将谷歌的 CSS 样式表下载到本地，然后通过相对链接的方式引入：

<link rel="stylesheet" href="css/fonts.css">

这样就不会受到 HTTPS 协议的限制了。当然，这个方法适用于谷歌提供的 CSS 样式表比较简单的情况，如果样式表比较复杂，这样做会增加维护的成本。

2. 使用 HTTPS 链接

另一种解决方法是使用谷歌提供的 HTTPS 链接，比如：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

谷歌其实已经提供了一些支持 HTTPS 协议的链接，我们只需要找到对应的链接就可以了。

3. 禁用混合内容

如果你的网站采用了 HTTPS 协议，但是有一些资源是通过 HTTP 协议加载的，可以尝试禁用混合内容：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

这样浏览器就会自动升级 HTTP 请求为 HTTPS 请求，从而解决这个问题。

4. 使用 CDN

最后一种方法是使用 CDN，比如 Google Fonts 的 CDN：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">
<script>
  WebFont.load({
    google: {
      families: ['Roboto:300,400,500,700']
    }
  });
</script>

通过 CDN 加载资源，可以避免 HTTPS 协议的限制，同时还能提升网站的加载速度。

结语

在网站开发中，遇到样式加载不了的问题并不罕见，特别是在使用外部资源的时候。而 HTTPS 协议的普及使得我们更加关注网站的安全性，但同时也需要解决因此带来的新问题。