Habe "Geblockt laden von gemischten aktiven Inhalten" auf HTTP website

Ich hatte das gleiche Problem. Ich gelöst, indem er eine relative Pfad anstelle einer absolute Weg.

Seit meiner Schriften sind aufgerufen, von diesem CSS "/styles/mein.css",
und meine Schriften waren, das in der "/fonts/Open_Sans..."

Vorher (mit FF-Fehler):

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/Open_Sans/OpenSans-Light.woff2") format("woff2"),
  url("/fonts/Open_Sans/OpenSans-Light.woff") format("woff");
  font-weight: 300;
}

Nach (ohne FF-Fehler):

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Open_Sans/OpenSans-Light.woff2") format("woff2"),
  url("../fonts/Open_Sans/OpenSans-Light.woff") format("woff");
  font-weight: 300;
}

Ich auf dieses problem als Ergebnis meiner live-und staging-Server HTTPS, und meine lokalen/dev kopieren sein HTTP.

Ich löste es durch die Erzeugung mein CSS dynamisch, und die Verwendung von inline - data: Schriften in der CSS, anstatt die URL-Verweise. Diese entfernt alle URL-Informationen, die einer schriftart zugeordnet, und so werden mögliche cross-site-cache-Kontamination.

In meinem Fall habe ich benutzt PHP, aber das könnte sich zu einem beliebigen server-side-Sprache.

<?php
//Declare this as a CSS file for the browser
header('Content-type: text/css');

/*
 * Respond with 304 if the content was served recently
 *
 * The logic here is:
 *
 * We get a IMS date in the request e.g. 21:00 (Then)
 * We look at the current time e.g. 21:30 (Now)
 *
 * So (Now - Then) must be < 60 * 60
 */
if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
    $thenTime = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
    if(time() - $thenTime < 60 * 60)
    {
        header('HTTP/1.1 304 Not Modified');
        exit;
    }
}

//Tell the client the resource was modified on the last hour
$modifiedDate = gmdate('D, d M Y H:00:00 T', time());
header('Last-Modified: ' . $modifiedDate);

?>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'),
       local('OpenSans-Light'),
       url(data:application/x-font-woff;charset=utf-8;base64,<?php echo base64font('open-sans-light.woff') ?>) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'),
       local('OpenSans'),
        url(data:application/x-font-woff;charset=utf-8;base64,<?php echo base64font('open-sans-normal.woff') ?>) format('woff');
}

<?php

function base64font($file)
{
    $fontFolder = realpath(__DIR__ . '/../fonts');
    $data = file_get_contents($fontFolder . '/' . $file);
    $base64 = base64_encode($data);

    return $base64;
}

Ich habe den 304-header-kick, wenn die Kopie bereits an den browser bereitgestellt wird letzten. Sie müssen nicht zu haben, aber es wird die Leistung verbessert, wenn Sie tun. Schrift-Definitionen, die nur selten ändern, so können Sie diese Verzögerung länger auf high-traffic-sites.