css - 启用 SSL 后，如果调用网站的 http 版本，图标字体无法正确显示

Question

这里我有一个用 CSS 定义的图标字体

.social li a.facebook:before { font-family: 'icomoon'; content: "\f09a"; }

现在如果我调用 http://www.somewebsite.com显示内容为 F09A 的矩形而不是图标。在源代码 (Ctrl + U) 中，css 是这样包含的

<link rel='stylesheet' id='font-css' href='http://www.somewebsite.com/wp-content/themes/sometheme/css/iconfont.css?ver=4.3.6' type='text/css' media='all' />

在此CSS中，字体相对包含

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?-m6u1i9');
    src:url('../fonts/icomoon.eot?#iefix-m6u1i9') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg?-m6u1i9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

Wordpress 的站点 URL 设置为 https。如果我在检查器中单击 http 样式表链接，我将被重定向到 css 的 https 版本。在 Chrome 中，我在调用网站的 http 版本后得到以下信息:

Font from origin 'https://www.somewebsite.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://somewebsite.com' is therefore not allowed access.

好像有两点不同:

• http 与 https
• www 与没有 www

调用网站的 https 版本工作正常。此处字体显示正确。

有没有办法让同一个站点同时运行 http 和 https 版本？还是我必须开始通过 .htaccess 强制使用 https？

一些旁注:

• 调用 https://somewebsite.com导致不安全的连接警告
• 调用 www.somewebsite.com 重定向到 https//www.somewebsite.com

证书是否只对 www.somewebsite.com 有效？

编辑:

现在我在域级别使用重定向。

http://somewebsite.com现在重定向到 https://www.somewebsite.com http://www.somewebsite.com正在重定向到 https://www.somewebsite.com

目前似乎有效。

Answer 1

是的，httpd.conf <VirualHost>条目允许您同时运行 https://www.example.com (在端口 443 上)和 http://www.example.com (在端口 80 上)。您甚至可以将它们指向相同的物理磁盘位置(可能不是最好的主意)。

您可能希望始终提供“www”或从不提供。 (即，如果未发送 www，则重定向到“www.yoursite.com”。否则类似的内容会不断弹出。

在 HTML/CSS 中，您可以指定“//somefile.example”来指示您正在制作绝对路径引用，但希望保留使用的相同方案。

您可以通过以下方式检查您的证书以了解它在 Linux 中的有效性:

openssl x509 -noout -in /yourcertfile -subject -issuer -dates

您想确保 CN= (通用名称)与您的网络服务器的主机名匹配，包括任何子域(即“www”)